Are general CSS classes wrong?

Question

Say I have a cleaner like this

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

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

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

because in fact it does not separate the design from the markup.

But, although this approach can reduce some duplicates of the code, it also slightly violates the idea of ​​shared design, because I need to directly modify the html.

Is it good to have classes like this and add them where necessary? Or should I explicitly add :after { ... to everything that I did not clear the float (for example, #header: after ..., #menu: after {.... `), which leads to duplication of code, but also a much more divided design where I don’t need to directly touch HTML.

A general-purpose class would probably be useful for javascript, where it would be easier to change styles, but duplicate code is worth the separate design effect in pure HTML / CSS?

Answer 1

Is it good to have classes like this and add them where necessary?

Yes. I have been using it for a long time with many different designs and have not found any problems; -)

Answer 2

Yes.

The class attribute is used to indicate that elements belonging to the same class belong to a group. Then you can do something with these groups using CSS or Javascript. An element can be part of many groups, so it can have many classes.

In your example, the div refers to the "elements after which I want to clear floats" groups, so each element in this group must have a "cleaner" class to indicate this in CSS.

Read this modular CSS article for a good way to structure CSS and classes.

Answer 3

Actually, there is no good way to clear the layout in a solution completely independent of the content. This is because CSS is a modeling language and is overloaded for layout processing (just like HTML tables returned "per day"). Actually there is no pure layout language (for now), and therefore we must do what we have.

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

Answer 4

What I'm trying to do in such situations is to find out if there is some kind of basic abstraction that I am missing. Do these elements have something in common in terms of structure? Can you come up with a class name that ties them all together and makes no sense of CSS?

If not, do not be offended by deception. The ideal is the enemy of good.

Answer 5

The problem is that CSS is poorly designed to avoid duplication. It would be great if we could define groups of rules and values ​​and apply them to certain selectors. This way you can avoid duplication by not putting presentation markup in your HTML. Unfortunately, CSS makes this very difficult.

Your approach is pretty simple, but it has one major drawback: if the same HTML is intended to be used with multiple stylesheets, and some of these stylesheets need to be cleaned up in different places than others, then you may have problems with this approach . If your HTML is already tied to a document view, this flaw does not apply as well.

Edit: forgot to mention that you can rob yourself of repeating if your CSS is generated programmatically. Then it can be complicated and complex as CSS requires, being conceptually simple and easy to maintain. The downside here is the increased download size. This can be mitigated by compression.