Effectively reusing css rules within other rules - html

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.)

Answer 2

Using just CSS, the best way to accomplish this with minimal repetition of code is to do something like the following:
.blueGradient, .foo {
...
}
.greenGradient, .foo:hover {
...
}
Using a comma in your selector allows you to assign a block of CSS to multiple elements/IDs/classes at once.

Answer 3

You can't quite do what you're proposing in plain CSS. You might looking to using LessCSS. It has a feature called Mixins:
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
I know that's JS, but it wouldn't require you yo learn JS, just stick it on the page.
Otherwise you're stuck with what Justin Michael and others have said. Which is certainly good enough for most cases. Part of what you may need to do here is to train yourself to think in CSS rules.