Comments on: Avoid Using Generic CSS Classes

By: Leon Paternoster

Leon Paternoster — Sun, 22 Mar 2009 21:07:56 +0000

Hi Dustin, I used to think like this. However, I now think classes have absolutely no semantic value except to someone reading the HTML. The only elements that aid a document's meaning are tags. So it really doesn't matter if you use class="clear no-margin 2-col" or class="aside", as long as you're using the correct tag (and if you are using lots of DIVs for 'hooking' purposes, your tags between the DIVs are meaningful). That's why HTML5 is so promising: we get lots more meaningful tags, such as aside and section, which should mean less DIVs.

By: tj mapes » Blog Archive » What I’m Reading (weekly)

tj mapes » Blog Archive » What I’m Reading (weekly) — Sun, 08 Feb 2009 12:32:26 +0000

[...] Avoid Using Generic CSS Classes | Devlounge [...]

By: Jonas

Jonas — Wed, 04 Feb 2009 15:20:50 +0000

Actually, on most of my websites I try to use only two or three letter names for classes, simply for identification. What floats left today may be floating right tomorrow. I do not want to run into redesign-trouble.

By: Markup debates: rank priorities, code accordingly | Wisdump

Markup debates: rank priorities, code accordingly | Wisdump — Tue, 03 Feb 2009 06:43:27 +0000

[...] h1 Debate reminds me of a recent post at Devlounge that condemns generic CSS classes. Sure separation of content and presentation is supposed to make webpages more efficient and [...]

By: NM

NM — Mon, 02 Feb 2009 21:45:05 +0000

Take a step back, and look at what you’ve written. You’ve described schizophrenia. First HTML contained ‹center›, ‹b›, ‹i› … then it’s supposed to be outside of its scope. This is IMO an indication that something’s wrong here. ‹strong› or ‹em› is not much more abstract than ‹b› or ‹i›, merely more obtuse. Besides, italics do not always denote emphasis.
Finally HTML is designed to make describe documents, but in reality, it’s mostly used to program interfaces. Just look at this page; look at the top, the right column and the bottom part: it’s interface. The document is less than half of the content.

By: Dustin Boston

Dustin Boston — Mon, 02 Feb 2009 17:07:08 +0000

@jaredmellentine – That’s a good point that the W3C wanted to emphasize CSS. I don’t think it was the only reason. But good point.

@harry – Thanks for responding! What I meant was that you had to hard code something in the HTML in order to achieve the presentational effect.

By: jaredmellentine

jaredmellentine — Mon, 02 Feb 2009 16:32:09 +0000

Sure. I can see your point, but I think there are some holes in it. The reason the

tag and the align attribute have been deprecated is to emphasize CSS. Maybe “text-align: left;” is too basic an example. Here’s a better one:

I setup helper classes with nearly every stylesheet I have. They include: .fl/.fr (floats), .cl/.cr/.cb (clears), .m/.mt/.mr/.mb/.ml (margins – based on the design), .b (bold) and .l/.c/.r (text-aligns). I guess it’s a designer preference, but it’s simple for me to create an element that clears and is floated left with a right margin (“cb fl mr”). The code is condensed – especially when using Javascript – and easy to remember.

My process doesn’t work for everyone because some people just can’t remember what the classes stand for. But it seems a little ridiculous to have a unique class for every element that needs to be styled.

By: Weight Loss Blogs — Wp Point | Wordpress Theme Viewer

Weight Loss Blogs — Wp Point | Wordpress Theme Viewer — Mon, 02 Feb 2009 15:40:48 +0000

[...] Avoid Using Generic CSS Classes | Devlounge [...]

By: Harry Roberts

Harry Roberts — Mon, 02 Feb 2009 00:03:25 +0000

Hmm;

‘Presentation is being controlled from within the markup.’

I see your point, but that’s a little incorrect. Presentation isn’t being controlled in the same was as deprecated tags. It isn’t being controlled though markup at all. The align etc attributes do control presentation through markup as they make presentational changes through markup *alone*. Applying a generic class name however provides a *hook* for CSS to alter the presentation. Two very separate things.

Your point(s) regarding semantics however are extremely valid and have prompted me to add additional note: http://csswizardry.com/web-design+/#css4-3-reactions

Cheers,
Harry

By: Bram Van der Sype

Bram Van der Sype — Sun, 01 Feb 2009 22:55:30 +0000

Agreed, point made, but! What if you have a (semi-) complicated layout that needs several floated divs that require no additional styling except for different floating.

I could follow your point and name them all appropriate names, and then just put all those in my css file. Agreed, semantically, I can see why this is “better”.

But what about a “clear” class? When you have a lot of floats in a container, sometimes, all you need is a div to clear them. As far as I can see, there’s no semantically correct way to name them, as all they have to do is “clear”. The stupid part is that we have to use those divs (or whatever element you prefer) to clear your floats, or your container won’t like it much. Maybe the positioniseverything.com easy clearing way is the way to go (http://www.positioniseverything.net/easyclearing.html) however, I’ve always disliked conditional comments for IE…