Class Warfare! Can I eliminate CSS classes from my HTML?
https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/
I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website:
I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely.
Long time readers will know that I'm a big fan of using semantic HTML where possible. If you peek beneath the curtain of this website you'll only see a handful of <div> elements (mostly because WordPress hardcodes them) - all the other blocks are fully semantic. Regrettably, there are rather too many <span> elements for my liking - normally for accessibility or for supplementing the metadata.
Overall, my CSS contained about 134 rules which selected based on class. Is that a lot? It feels like a lot.
On the one hand, classes are an easy way of splitting and grouping elements. Some <img>s should be displayed one way, the rest another. There's no semantic way to say "This is a hero image and should take up the full width, but this is an icon and should float discretely to the right."
But, on the other hand, why do we need classes? Keith Cirkel's excellent post "CSS Classes considered harmful" goes through their history and brings together some proposed solutions for replacing them. I think his idea of using data- attributes is a neat hack - but ultimately isn't much different from using classes. It's still a scrap of metadata to be tied into a style-sheet.
Classes are great for when you reuse something. I have multiple <section> elements but most don't share anything in common with the others. So they probably oughtn't have classes.
Removing classes has some advantages. It makes the HTML fractionally smaller, sure, but it also forces the author to think about the logical structure of their page and the semantics behind it.
Looking through my HTML, lots of classes exist because of laziness. If I want to position all the <time> elements which are within a comment, I don't need to write <time class="whatever"> and to pair it with .whatever { … }. Instead, I can use modern CSS selectors and say #comments time { … }.
But this leads me on to another existential question.
Are IDs necessary in modern HTML?
Mayyyyybe? I only have one <main> element, so an ID on there is unnecessary. <input> elements need IDs in order to be properly targetted by <label>s - but the label can wrap around the input. I have multiple <aside> elements because there's no semantic <widget> element, so they need unique IDs.
In theory, as suggested by Adam above, I could use an autonomous custom element like <my-widget> - but that has none of the semantics and, frankly, feels like a bit of a cheat.
Trimming the fat
Any day where I can delete some code is a good day. This was an excellent exercise in going through (years) of HTML and CSS to see what cruft had built up.
The first CSS rule I changed was, as mentioned above:
CSStime.commentmetadata { float: right;}Which became:
CSS#comments time { float: right;}Classless and slightly more brief. Is it more readable? Having the fact it was about the metadata in a class could have been slightly useful - but if I thought it would be confusing, I could stick a /* comment */ in there.
Next, I found <nav class="navigation posts-navigation"> - what a tautology! I have multiple <nav> elements, it is true. But none of them have the same style. So this swiftly became <nav id="posts-navigation"> with an accompanying CSS rewrite.
My theme switcher had a bunch of <label class=button>s. They were all within a container with a unique ID, so could they be changed? Yes. But seeing the class name in the HTML is a good reminder to the author of how they are meant to display. Does that co-mingle content and presentation too much?
Some of the WordPress default classes are ridiculous. The body_class() function injected this into every <body>
"wp-singular post-template-default single single-post postid-62959 single-format-standard wp-theme-edent-wordpress-theme"
Most of that is redundant - what's the difference between single and single-post? For my purposes, nothing! So they were all yeeted into the sun.
Rather than targetting IDs or classes, I targetted the presence or absence of Schema.org microdata.
For example:
CSSmain[itemprop="blogPost"] { … }main:not([itemprop="blogPost"]) { … }This can go to the extreme. I have lots of comments, each one has an author, the author's details are wrapped in <div class="authordetails">…</div>
That can be replaced with:
CSS/* Comment Author */li[itemtype="https://schema.org/Comment"] > article > div[itemprop="https://schema.org/author"] { margin-bottom: 0;}Is that sensible? It is more semantic, but feels a bit brittle.
Parent selector are also now a thing. If I want a paragraph to have centred text but only when there's a submit button inside it:
CSSp:has(input#submit) { text-align: center;}Again, am I sure that my button will always be inside a paragraph?
Similarly, sibling selectors are sometimes superior - but they do suppose that your layout never changes.
What remains?
There are some bits of this site which are reusable and do need classes. The code-highlighting you see above requires text to be wrapped in spans with specific classes.
Image alignment was also heavily class based.
There are some accessibility things which are either hidden or exposed using classes.
A bunch of WordPress defaults use classes and, even if they are redundant, it's hard to exorcise them.
As much as I would have liked to get rid of all my IDs, many needed to stay for linking as well as CSS targetting.
All told, the changes I made were:
- 134 class selectors down to about 65.
- 35 ID selectors up to about 50.
- 5 attribute selectors up to to about 20.
- Deleted or combined a lot of redundant CSS and tidied up my markup considerably.
I have around 250 CSS rules, so now the majority target semantics rather than classes or IDs.
Is this really necessary?
No, of course not. This is an exercise in minimalism, creativity, and constraint. Feel free to litter your HTML with whatever attributes you want!
As I went through, it increasingly became apparent that I was fitting my CSS to my HTML's logical structure rather than to its conceptual structure.
Previously, my comments were targetted with a class. Now they have the slightly more tangled targetting of "divs with this schema attribute whose parent is an article and whose grandparent has this ID".
It is a delightful meditative exercise to go through your code and deeply consider whether something is unique, reusable, or obsolete.
#blog #css #HTML #schemaOrg #semanticWeb
PPC Land
Wolfgang Wagner
Ricardo
#Digital ⚓️ #Vagabond 🦈
Terence Eden’s Blog
Habr
