My problems with “utility-first” CSS

If you’ve not already read it yet, you should read Adam Wathan’s article on how he reached the conclusion that using utility classes was the best way to build consistent components in CSS. As I read the article I followed his conclusions and agreed with his justifications. It sounded like a very reasonable solution. However, I had a problem.

I recently purchased a theme from ThemeForest that had been built using a CSS “utility” framework. At first I was thrown by the sheer amount of noise in the HTML, but once I realised what was happening I decided to go with it. However, as I started to customise the template I ran into several issues.

The first issue I encountered was that I had no idea what CSS utility classes existed. IDE auto-complete helped here but I still had to troll through the themes CSS files to find the classes I needed. This turned out to be time consuming and annoying, especially when the classes had shorthand names that weren’t clear what they meant.

The second, and more important, issue I had was that I quickly realised that this was going to become very hard to maintain. Every time I wanted to make a small change to a fundamental part of the CSS (e.g. globally tweaking the padding for the “sections” of the theme) I was going to have to update each section manually in the HTML 😞 To be fair to Adam, he suggests that in these cases styles should be abstracted into a CSS component instead of using a template-based component, but in this case the developers of the theme hadn’t done this.

And this is the biggest issue I have with “utility-first” CSS. It feels brittle, and it is too easy to stray from “best practice”. I guess that could be said about many things (I’ve recently witnessed what happens when you misuse BEM for example) but it is a valid concern none the less. In the example of our ThemeForest theme, I started to just add classes to our theme so I could write CSS the “normal” way, but it just got messy and in the end I ditched the theme.

I’m not saying that Adam is wrong and that “utility-first” CSS is not a good solution. However, like many things in life, it’s not a silver bullet and still has to be done “right” in order for it to be effective.