Question

I’m trying to be more modular in my CSS style sheets and was wondering if there is some feature like an include or apply that allows the author to apply a set of styles dynamically.

Since I am having a hard time wording the question, perhaps an example will make more sense.

Let’s say, for example, I have the following CSS:

.red {color:#e00b0b}
#footer a {font-size:0.8em}
h2 {font-size:1.4em; font-weight:bold;}

In my page, let’s say that I want both the footer links and h2 elements to use the special red color (there may be other locations I would like to use it as well). Ideally, I would like to do something like the following:

.red {color:#e00b0b}
#footer a {font-size:0.8em; apply-class:".red";}
h2 {font-size:1.4em; font-weight:bold; apply-class:".red";}

To me, this feels “modular” in a way because I can make modifications to the .red class without having to worry so much about where it is used, and other locations can use the styles in that class without worrying about, specifically, what they are.

I understand that I have the following options and have included why, in my fairly inexperienced opinion, they are less-than-perfect:

1. Add the color property to every element I want to be that color. Not ideal because, if I change the color, I have to update every rule to match the new color.
2. Add the red class to every element I want to be red. Not ideal because it means that my HTML is dictating presentation.
3. Create an additional rule that selects every element I want to be red and apply the color property to that. Not ideal because it is harder to find all of the rules that style a specific element, making maintenance more of a challenge

Maybe I’m just being an ass and the following options are the only options and I should stick with them. I’m wondering, however, if the “ideal” (well, my ideal) method exists and, if so, what is the proper syntax?

If it doesn’t exist, option 3 above seems like my best bet. However, I would like to get confirmation.

Answer 1

Short answer: There’s no way to do this in pure CSS.

Longer answer: Sass solves this problem via the @extend directive.

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

This lets you keep your CSS modular in development, though it does require a precompilation step before you use it. It works very nicely though.