Question

Here’s a simple example of what I’m looking to do.

I want to define a css rule for a 2 gradient backgrounds – blueGradient and greenGradient.
I want all elements with css class foo to have the blueGradient rule, and on hover have the greenGradient rules.

So, here’s how I want my HTML to look:

<div class="foo">Hello</div>

This should have a blue gradient normally, and green when I hover on it.

Ideally, I want my CSS to look like this (I know it’s not legal):

.blueGradient {
...    
}
.greenGradient {
...
}
.foo {
<#include blueGradient>
}
.foo:hover {
<#include greenGradient>
}

What’s the best way to achieve this?
If something like this isn’t possible, what’s the best way to achieve this without having several copies of the blue/greenGradient definitions all over my CSS rules?

I know I can change my HTML to look like this:

<div class="foo blueGradient">Hello</div>

But then, how do I deal with the hover (I don’t want to use JS)?

Answer 1

For rules that you want to apply to more than one selector, just separate them by commas:

.blueGradient, .foo {
/** blue gradient styling **/    
}

.greenGradient, .foo:hover {
/** green gradient styling **/
}

In the same CSS file (and, indeed, in different files if you like) you can define styles for the same selector as many times as you like, so you can also define .foo and .foo:hover styling that will only be applied to these selectors, and will not shared with other .blueGradient and .greenGradient elements:

.foo {
/** foo-specific rules **/
}

.foo:hover {
/** foo:hover-specific rules **/
}

This does not require you to change your html. Where the same attribute is defined in both entries with different rules (e.g. margin: 0; and then later margin: 10px;) the last entry takes precedence.

If you also want the blueGradient styles to be applied to yet another selector .bar, just add it to the chain:

.blueGradient, .foo, .bar {
/** blue gradient styling **/    
}

(Note in the example above, the .blueGradient and .greenGradient selectors are not required, unless they are being used elsewhere. You could replace them instead with a code comment that stated this was where the gradients were being applied if you wished.)