A really smart post on the “unsemantic” nature of CSS frameworks that deal with layout, by Darren Jones, who created the Sparkl framework. The best line in the article is this:
> Remember [layout class names] don’t add any semantic value, but your page doesn’t lose any semantics by having them either.
This is the point I wish people would remember. Class names aren’t actual semantics, they’re fake semantics. They’re just a way for you to add some useful hooks for scripts and styles to hang on (and possibly for other people to mash with, in the case of something like microformats). Validators, screen readers, browsers, and the like couldn’t give one iota of a damn what your class names are. Likewise, is it really worth getting bent out of shape about too many div and span elements? Remember, these elements were specifically designed to have no meaning. It doesn’t matter if there is one div or five hundred, the net gain is no meaning.
Sure, it makes sense to use less presentational class names whenever you can and to only use as many divs as you need to, but if the aesthetics of your fake semantics and counting div elements starts to overtake getting your design just right, on time and under budget, then I’d say your priorities are out of whack.
Cheers for the link Jeff. I like your point about class names being fake semantics. While I was writing my post I was thinking what point ‘semantic’ class names serve - I mean really, who or what cares if you give a div a class of ‘comments’ or ‘three-col grid’? Sure, ‘comments’ has more meaning, but apart from people who read source-code for fun, who is going to notice - a browser certainly won’t treat it any differently? If, however, you mark something up with a proper semantic element, such as a h1 or ul, then it will mean something to search engine spiders, browsers and other devices, but they don’t care about class names, semantic or not.
The only semantic advantage that can be gained with class names is if they follow some sort of standard or convention like microformats.
Well put. What I find amazing is that in 2008 there are still folks who argue for “semantic” CSS class names.
Back in 2002 Tantek Celik wrote:
So I believe t is a good practice to give CSS class presentation-agnostic names. However when you are using a more generic system like a framework, it is perfectly accettable and handy to have class names like Blueprint’s “span-6”, “last”, etc.
That’s a great quote from Tantek, Anthony. Thanks so much for that! Sometimes I think people “get it” more in 2002 than today. Back then, people were interested in making development easier, reducing bandwidth usage, making things more SEO-friendly, and making things more accessible — all stuff that affects real people in positive ways. Today, a lot of the discussion we have in this community just feels like Web Standards penis-measuring, wherein people are interested in being the “most valid,” rather than making things work better for real people.
Interesting. I have been noticing a trend of not caring as much about the number divs/spans I’ve been putting in my code recently, whereas I used to stress out about and strive for the minimal amount possible. Maybe I’m just being real with the expectations that are put on my work (clients/higher-ups) or perhaps I’ve finally realized the minimalist/semantic CSS movement isn’t all it’s cracked up to be. The key for me right now is finding the perfect balance and letting go of the code nazi in me.
Maybe if I would have read this sooner I would have come to the realization sooner as well. Either way, it’s a great point to be made.