Is there a name for CSS code smell that can be seen in class names like "float" or "white"?

Question

I noticed some code in our projects using CSS class names such as red, black or float.
I want to provide some information for people so they know to avoid it.

Is there a common name for that code smell so I can reference it?

Answer 1

They are "non-semantic class names". That is, a class name should represent an idea, not how it should look or be laid out. That allows you to change the look and feel with a change in one place instead of everywhere that referenced class names red, black, float

There is one exception that exists for hacking purposes, for example if you need something that is implemented in different ways across browsers (the prefixed ones like gradients and others) and you don't want to repeat it every where. However, the better solution is to use SASS mixins.

.

• Andrey Shchekin: The thing is, there also class names like "item" that are not bound to the style values, but are also non-semantic the way I see it. I want to point to both problems separately, that is whty I am interested if this has a separate name.
• Ruan Mendes: @AndreyShchekin item is not on the same league (of badness) as classes named red, blue, float. Pick your battles. If it's div.item inside a div.tasks, it's not too bad, although I would prefer to use ul.tasks and li and not need an div.item
• Andrey Shchekin: I see your point -- unfortunately in the code I am looking at item is pretty meaningless, but it is hard to formalize. Anyway, it seems there are no common names for CSS smells anyway, so I'll accept your answer -- non-semantic is as specific as it gets.
• Ruan Mendes: @AndreyShchekin Why are you complaining about using "non-semantic"?
• Ruan Mendes: Well, non-semantic are class names that refer to the look and feel in general. Your note about list, data, value is a different problem, just poorly named classes (poor semantics). My point is that you should make your point by pointing out the problems with both types instead of finding a buzzword to convince them. It is the equivalent of convincing someone that their variables are poorly named, it's an art.