Utility CSS explorations
I’d like to pull together some thoughts on the various approaches to modern CSS development. A lot of what I see currently is focused on utility classes, but there are still good arguments for semantic classes.
As someone who’s literally been writing CSS for as long as it’s been readily available, the idea of keeping class names semantic is hardwired into my brain. Readjusting that thinking is a challenge. I feel my mind resisting it at every turn so I set out to explore the topic to see if I could uncover why everyone seems to be working toward this thing that feels anathema to me at first glance.
Articles
- In Defense of Utility-First CSS - This article was the most influential in getting me thinking about the viability of utility classes.
“Favor composition over inheritance”. This piece of wisdom from Design Patterns, one of the most influential software engineering books, is the foundation of utility-first CSS. It also shares many principles with functional programming: immutability, composability, predictability, and avoidance of side-effects. The goal behind all those fancy terms is to write code that’s easier to maintain and to scale.” - Sarah Dayan
- Tailwind versus BEM
- Axioms
- CSS Utility Classes and “Separation of Concerns”
- CUBE CSS - This option is much more in line with my personal philosophy of treating the web as a platform with most of what you need to build a web application.