Sol Ushon: Hey, Stan. Can I get your opinion on something?
Stanley Derds: Sure thing, Sol.
Sol Ushon: Why should I avoid presentational class names in my HTML?
Stanley Derds: Because presentational elements don’t belong in HTML. Avoid them like the Bubonic Plague.
Sol Ushon: But why?
Stanley Derds: Because they’re non-semantic.
Sol Ushon: Interesting. Well, what will be the effect on my development if I use presentational class names?
Stanley Derds: You will have non-semantic code.
Sol Ushon: Okay. But why is that bad?
Stanley Derds: Because it’s non-semantic.
Sol Ushon: Alright. Got it. But why is it bad to have non-semantic HTML?
Stanley Derds: Because it doesn’t convey any meaning in relation to the data.
Sol Ushon: Um…. in other words, it’s non-semantic, right?
Stanley Derds: That’s right.
Sol Ushon: But why are non-semantic class names bad?
Stanley Derds: Because of the ‘separation of concerns’ principle. Keep presentation out of your HTML.
Sol Ushon: But why is that a good principle?
Stanley Derds: Because it keeps your code from becoming non-semantic.
Sol Ushon: But if the non-semantic class name is not in any way connected to the HTML element name, which describes the content just fine, and if there is not a single machine in the universe that will try to derive any meaning or “semantics”, from that class name, in any context, in any circumstance, and if that class name actually makes my code easier to read, easier to use, and easier to maintain, and if giant rainbow-colored unicorns fly out of my butt with pink bunnies strapped to their backs, while the bunnies distribute crisp hundred dollar bills to all humanity, then why is it bad to have presentational class names in my HTML?
Stanley Derds: Because they’re non-semantic.
The real reason you should be using semantic class names in your HTML is not so a machine can derive meaning from your markup — it’s so that you have the flexibility to style elements in many ways within an application (particularly relevant when using media queries, where you may want elements to display differently depending on device), and throughout the application’s lifetime (.big-pink-title might not make any sense in 3 months, so now you have to change the code in more places).
Amen. Class names cannot be semantic in the “HTML semantics” sense since the HTML spec basically says they’re arbitrary hooks for styling and scripting. The semantic use of class names is to use whatever class names you want.
The very name “semantic class” is misleading, if not nonsensical. How you name your HTML classes has nothing to do with HTML semantics, and is only a matter of naming and productivity convention. Do whatever fits your project, your team, your client’s needs, etc.
Because next year you will have:
.red-border {box-shadow: 0 0 2px green; border:0;}and the next person maintaining the site will hunt you down.
But what about color-border or accent-border? and surely it’s just as much effort to hunt down every instance of box-shadow in a mire of comma separated classes as it is to hunt down the class accent-border on one sidebar.php file
@sesm: I’m going out on a limb here and going to say that the author mean classes like .by-line and .headline not specific classes like .red-border.
But
.headlineis a semantic classname… Presentational class names are those likebluetextetc.. To the author of this article: you are not a good developer if you can’t avoid using those. It’s very easy to maintain CSS without presentational class names.Amen to this. Sometimes you just need to use a presentational class. Maybe there’s no other way to describe the class apart from “I want this heading red”. No, not because it’s more important or needs emphasis. I just want this particular heading to be red, because it looks better right here.
What if I decide I later want to make it green? Then I change the class name to “green-heading”. If I’d made the name generic and changed the colour in the CSS then all the other uses of that class would be changed, and maybe I don’t want that. If I do want to change every other occurrence, a quick search/replace will do it just fine.
You can easily avoid using that class name. Give me an example (HTML structure) where it is necessary to use a presentational class name.
if only there was some way to uniquely identify that element, damn and blast HTML for not allowing something id=”my_funky_title” …. oh well, we can dream.
I’ve heard they will introduce that in CSS 4 Pr0 edition.
What if you need to support multiple themes? You better not call it green because someone is going to want it yellow. Semantic class names are more than semantics, it gives you the freedom to change your look and feel by changing only CSS, not the HTML. That’s why semantic is good,
Very interesting discussion to the question I once had few years ago when I just started my career. By “Semantics” I reckon as long as the class name means something, then it’s OK. “big-pink-title”, “red-border” are all OK when you have a “css class library” for the project you can pick from and switch quickly. The ones I always try to avoid are something like “title-1”, “title-2” etc.
I used to be such a Stanley Derds! But working on a few big projects recently I’ve seen how not using non-semantic classes can cause stylesheet sizes to spiral out of control through having to use ridiculously long comma-separated selectors. Using class names like “red-border” is obviously short-sighted, but there’s nothing wrong with the occasional “error-type-2” or “side-bar-header”.
I have to agree the above.
This.
That.
Aren’t both
"error-type-2"and"side-bar-header"semantic? It means the second type of error, and that title-space in a bar that may or may not be an aside… Very different from “col-xs-12”Bearing in mind that semantics is the study of meaning, both types of class name are equally semantic (assuming they both impart the same amount of meaning). red-border is just as semantic as highlight-border, because they both offer ‘meaning’. (You could probably find a better example than that…)
Presenting this as a ‘semantic’ vs. ‘non-semantic’ argument, as so many people have been doing recently, is setting up a straw man argument. What we actually have is a disagreement between two types of semantic class names: ‘presentational’ and ‘functional’ class names. I prefer the latter, because they seem easier to maintain over the life of a website or app, where minor design or functional changes wouldn’t require the changing of class names in the functionally semantic case, but which would in the presentationally semantic case (e.g., the case where the highlight border is changed from red to green; if you didn’t change the presentational class name, maintenance would become a nightmare).
In class names, semantics has nothing to do with machine readability (and nothing to do with HTML semantics), but is about *human* readability.
A non-semantic class name would be something like ‘class-1’ or ‘xwrtfd’, which you *would* want to avoid, because trying to code like that and maintain that code would be he’ll.
So, yeah, semantic class names do matter.
I could not get into this post, may be there should be a better definition to what we call semantic.
Regard, Tiyo
lol.
Totally agree with Sun Ushon.
This conversation can be applied to many issues related to standardization of the Web.
I laughed a lot. Really.
XD
There is a reason, semantic classes allow you to change the look and feel by modifying just the CSS (or swapping out the entire style sheet for theming). Non-semantic class names will require that you modify the CSS and the HTML when the look and feel needs to change.
Non of this would be relevant if the the majority of web developers weren’t rubbish. Unfortunately the people driving the technology also appear to have little understanding of the platforms they build for. Yes they can cobble together new JS frameworks or CSS shims to make it work but in the end we are working to a poor design implemented by poor innovators and because everyone else knows so little about it they think things like bootstrap are really neat, not a mess creating never ending problems, semantically written or not!
kind of agree, but I’d be careful to tar everyone with the same brush. It’s not always practical for people to reinvent the wheel even if it has a few bumps and make for a bit of a mess. Hopefully people continue to innovate and improve things by coming up with new solutions
Class names cannot be semantic in the HTML, since the HTML basically says they’re arbitrary hooks for styling and scripting.
Maintain CSS without presentational class name. I completely agree