tags:

views:

121

answers:

6
+2  Q: 

Combining styles

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

+3  A: 

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;
}
Dave Markle
Should I downvote you for Ann Coulter? :)
Robert Harvey
This is not a solution to the problem. I already apply the med-font style as you suggest. But when there are html tags that don't otherwise need a class assigned to them, this is tedious. In the example, say a few dozen anchor tags.
schickb
But I don't see why you're applying med-font to all of the 'a' tags... You should be able to use the CSS inheritance rules (which are actually pretty sophisticated and glorious) to eliminate that duplication in other ways. I think your example isn't concrete enough to really show where the repetitiveness comes in.
Dave Markle
I added more details and example html to the OP.
schickb
see above edits...
Dave Markle
But you seem to have forgotten the point about only declaring a given font size once. For example, the med-font style would also be used on other tags (div's, p's, etc). I added the <div id="username"> to the example accordingly. The overall goal is to declare a font class once and use it everywhere it is needed (and at the same time reducing redundantly typing that class everywhere).
schickb
Basically, the newly revised answer is that you are starting to be a bit stubborn, and are thinking about your CSS pretty one-dimensionally. Your CSS selectors should not refer to specific fonts or colors, but should relate to the semantics of what you're trying to do. My solution solved the problem posed by your example with no duplication. I suppose if you have a very complicated, messy, inconsistent set of pages the CSS would get complicated as well. I *strongly* recommend that you read this: http://oreilly.com/catalog/9780596527334/.
Dave Markle
Sorry, but false on all accounts. My pages and CSS are very clean, I'd simply like to make them more so. There is a reason DRY is a popular concept. What you interpret as stubbornness is really your lack of understanding of the problem. Maybe my fault for lack of detail, but none the less I am simply trying to help you see what bothers me with today's CSS. Which maybe you still don't understand? I'm not looking for an way to do this in CSS2... I already know it can't be done.
schickb
Let me cut to the chase here. The answer is no, I think CSS is pretty elegant, and I rarely have to repeat myself. If you have a lot of problems with repeating yourself, then you need to take a step back and reconsider your design. The very first step to doing that is losing the ego.
Dave Markle
I'm not sure why you feel the need to be insulting. But whatever... at least you aren't still suggesting incomplete CSS2 solutions. Note that no one else in this thread proposed CSS2 solutions (since there are none). My actual CSS in question has the font-size written twice. What I want is to have it written once without adding lots of classes to tags. Its not that big of a deal... no need to get into a huff.
schickb
+2  A: 

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

Alan Haggai Alavi
I like the approach taken by Compass. Thanks for pointing it out!
Gab Royer
Sass and Compass look very interesting. Sass solves my dilemma very well. My only hesitation is that it would add a compile step to the development cycle. Its very nice being able to just ctrl-r in the browser to see changes quickly
schickb
@schickb: Yes, you can do that with Compass. Just `watch` the project directory with Compass: `compass --watch /my/project/dir/`.
Alan Haggai Alavi
A: 

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

Darko Z
In what way is that like a general purpose programming language? It is still totally declarative. And it doesn't seem too dissimilar from the already support @import.
schickb
I have to agree with schickb, the language would sill remain declarative.
Gab Royer
It would remain declarative, but it would gain a feature of general purpose programming languages which is variables
Darko Z
@Darko, not at all. Variables represent storage and can be reassigned (except for spacial cases like const). What I am suggesting has much more in common with macros than variables. And macros certainly are not required for a turing complete language.
schickb
+1  A: 

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.

Gab Royer
+1  A: 

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.

Matthew Schinckel
A: 
  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!

Crayonz