Combining styles

Question

I have long wanted to be able to include one style class within another. For example

med-font {
  font-size:12px;
}

#message a {
  style: med-font;
  color: blue;
  ...
}

/* lots of other styles, some of which use med-font */

Obviously this is a stripped down example, but the key point is that all those anchor tags within #message shouldn't need explicit classes or ids. For now I either duplicate the font-size in each class that needs it or add classes to things that wouldn't otherwise require it. And since I want to easily control the font-size from one place, I usually start adding classes.

Another solution is to split up the definition of "#message a" in this example (below). This works ok for small projects, but for larger projects this is actually my least favoured solution. It makes site maintenance very difficult if you have many classes split apart and scattered around large style files.

med-font, #message a {
  font-size:12px;
}

#message a {
  color: blue;
  ...
}

So my question is two parts: 1. Does this annoy other people? 2. Does anyone know if this feature is/was being considered for CSS3?

Edit: Adding example of html body and more details...

The main point is that adding a class attribute to the 20 anchors below to set their font size is tedious.

<div id="username" class="med-font">schickb</div>
<div id="message">
  <div id="part1">
    <a href="whatever">text</a>
    <!--lots more tags and say 6 anchors -->
  </div>
  <div id="part2">
    <a href="foo">text</a>
    <!--lots more tags and say 8 anchors -->
  </div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
    <a href="boo">lala</a> 
    <p class="med-font">Company Name</p>
    <!-- other tags and 3 more anchors -->
</div>

Remember, an important goal is to have one place where "med-font" is declared so that it is easy to adjust. In my actual project, there are small, medium, and large font styles. I only want one declaration for each so that I don't have to search through the css to say change 12px to 11px.

The best solution currently is to add the "med-font" class to all the anchors in the body, and the "small-font" class to all the anchors in the footer. But I'd much rather do what I showed originally, and simply include the desired font in the styles for "#message a" and "#footer a".

Summary: I want CSS to be more DRY

Answer 1

This is exactly what the Compass framework is good at. Sass allows variables, which makes coding/maintaining stylesheets very easy and a pleasant experience.

Answer 2

No, it does not annoy me, because you can use multiple classes for an element and BOTH will match:

.idiot {
   color:pink;
   text-decoration:underline;
}

.annoying {
   font-weight:bold;
}

/* and if you want to get REALLY specific... */
.annoying.idiot {
   background-image('ann.jpg');
}
...

<div class="annoying idiot">
   Ann Coulter
</div>

Personally, I find this a much more versatile solution to the problem. For example, in jQuery (or in another framework), you can add and remove these classes -- most commonly, you'll add a "selected" class or something that might do something like highlight a table cell, and when someone clicks to toggle it off, you just remove the "selected" class. Uber-elegant IMO.

In response to your edits, all you would have to do to remove the CSS from all of your A links would be to do something like this:

#message > div > a {
   font-size:12px;
}

#footer > a {
    font-size:10px;
}

Where the > symbol means "is a child of"

or, more generally (but this would also match an A directly inside #message and anything deeper -- the space means "is any descendant of")

#message a {
   font-size:12px;
}

#footer a {
    font-size:10px;
}

Answer 3

Have a look at SASS, which might do what you want. It allows for nested CSS structures, which can then be converted to CSS. I think.

Answer 4

In my opinion, the fact that you can't do this is perfectly OK because your CSS should remain as straightfoward as possible. On of the greatest advantage of CSS, as mention in Micheal Kay's XSLT reference (yeah xstl... I know), is that CSS is very simple and incredibly easy to understand.

I don't have to look at multiple places to know the styling effects of putting a class on a tag (well maybe but still).

So for me it would be a no for number 1. And as for 2, it has been discussed and I don't think it will be part of the standard.

Answer 5

css is not a programming language, it was never meant to be and (at this stage) never will be. what you're talking about has been discussed plenty of times before in W3C and WHATWG

oh and to answer 1) it doesn't annoy me

Answer 6

1. No, It doesnt annoy me, IE6 annoys me :)

2. It would be a useful feature to have, especially in a css framework, however, are we not being encouraged to lump all our css into one file now for "optimisation". I havent heard any rumours about such a feature in css3, but there is still a way to go on that spec yet, so who knows, it could make it in if you make enough noise now!