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?
Add a comment
|
1 Answer
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.
.
answered Apr 23, 2013 at 22:42
-
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. Commented Apr 23, 2013 at 22:49
-
@AndreyShchekin
itemis not on the same league (of badness) as classes namedred, blue, float. Pick your battles. If it'sdiv.iteminside adiv.tasks, it's not too bad, although I would prefer to useul.tasksandliand not need andiv.itemCommented Apr 23, 2013 at 22:53 -
I see your point -- unfortunately in the code I am looking at
itemis 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. Commented Apr 23, 2013 at 23:00 -
1@AndreyShchekin Why are you complaining about using "non-semantic"? Commented Apr 23, 2013 at 23:01
-
2Well, 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. Commented Apr 24, 2013 at 2:28