Sep 14, 2025
This website has no class
In my recent post, “There’s no such thing as a CSS reset”, I wrote this:
Think of elements like components, but ones that come packed in the browser. Custom elements, without the “custom” part. You can just like, use them.
The line continued to rattle around in my head, and a few weeks later when I was digging into some cleanup work I came to an uncomfortable realization; I wasn’t really taking my own advice. Sure, I was setting some default element styles, but I was leaving a lot on the table. I felt attacked. Called out even. Present me, positively roasted by past me. There was only one possible solution; refactor my website.
I like to apply severe constraints in designing and building this site – I think constraints lead to interesting, creative solutions – and it was no different this time around. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely. I haven’t used a class-free approach since the CSS Zen Garden days, and wanted to se how it felt with modern HTML and CSS.
Doubling down on styled defaults
CSS for the site was structured around 3 cascade layers; base , components , and utilities . Everything in base was already tag selectors, so the task at hand was to change my approach for components, and eliminate utilities completely.
Step 1? Mitigation. There was plenty of code that could have been styled defaults but wasn’t, so I gave all my markup a thorough review, increasing use of semantic elements, extracting common patterns in the form of new element defaults, and making more use of contextual element styling. By contextual styling, I mean going from something like this:
.header-primary { margin-block : clamp ( var ( --size-sm ) , 4vw , var ( --size-lg ) ) var ( --size-flex ) ; }
... continue reading