Are general purpose CSS classes wrong?

Question

Let's say I have cleaner like this

.cleaner:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;                
}

so I can add class cleaner to everything I want to clear floats. This is imho much better way than adding

<div style="clear:both;"></div>

instead, because it doesn't really separate design from markup.

But while this approach can reduce some code duplicates, it also kinda breaks the idea of separated design, because I have to change html directly.

Is it ok to have classes like this and add them wherever needed? Or should I add the :after { ... explicitely to everything I wan't to clear floats (like #header:after ..., #menu:after { ....`) which results in code duplicites, but also much more separated design where I don't have to touch the HTML directly.

Probably the general purpose class would be useful for javascript, where it would be easier to change styles, but are the code duplicates worth the effect of separated design in pure HTML/CSS?

Answer 1

Is it ok to have classes like this and add them wherever needed?

Yes. I'm using it long time with many different designs and not found any trouble ;-)

Answer 2

What I try to do in situations like this is figure out if there's some underlying abstraction that I'm missing. Do these elements have anything in common in terms of the structure? Can you think of a class name that would tie all of them together and make sense absent the CSS?

If not, don't feel bad about cheating. Perfect is the enemy of good.

Answer 3

Yes.

The class attribute is used to indicate that the elements that share the same class belong to a group. You can then do things to these groups using CSS or Javascript. An element may be part of many groups so could have many classes.

In your example the div belongs to the groups "elements after which I want to clear floats" so each element in that group should have the class "cleaner" to indicate this to the CSS.

Have a read of this article on "Modular CSS" that talks about a nice way to structure your CSS and classes

Answer 4

The problem is that CSS is poorly designed from the standpoint of avoiding duplication. It would be awesome if we could define groups of rules and values and apply those to certain selectors. This way you could avoid duplication without putting presentational markup in your HTML. Unfortunately CSS makes this very hard to do properly.

Your approach is fairly sound but suffers from one major drawback: if the same HTML is meant to be used with multiple stylesheets, and some of those stylesheets need clearing in different places than others, then you may have problems with this approach. If your HTML code is already tied to the presentation of the document then this drawback doesn't apply as much.

Edit: Forgot to mention that you can void repeating yourself if your CSS is generated programmatically. Then it can be as verbose and complex as CSS requires while being conceptually simple and easy to maintain. The downside here would be increased download size. This could be mitigated by compression.

Answer 5

There is really no good way to clear layout in a completely content-independent solution. This is because CSS is a styling language and has been overloaded to handle layout as well (much as HTML tables were back "in the day"). There is really no purely layout language available (yet) and as such we have to make do with what we have.

I like your approach since it keeps extra markup elements to a minimum, which is much more portable. However I'm not sure IE6 supports the :after pseudo-element, so tread carefully.