Utility-first CSS

Reading Time: < 1 minute

During dotCSS 2019, Sarah Dayan made a compelling—if, in summary a flawed argument “In Defense of Utility-First CSS”. There’s certainly room for us to reflect and also to counter with some concerns.

Sarah argues that utility-first has advantages over our grooming toward semantic CSS and its enhancement with BEM CSS writing styles. These add weight to the performance of pages. The Utility-First CSS strategy she supports is more akin to those wantanly waffley atomic style strings found in older-generation frameworks like Bootstrap.

There’s a moment of epiphany within her talk and I am close to being bought in. Then her confidence fades and wanes into an almost apologetic summary left open to the audience to run away with: a caveat to keep your options open. “Most importantly [do the best] for the users”. I am not sure where that fitted into the argument?


Here’s an example snippet from the video:

<h4 class="text-lg text-grey-dark">

That’s acceptable. How about?

<h4 class="text-margin-tall text-padding-wide text-lg text-grey-dark text-shadow text-centered">

Now imagine we want the H4 class to display without the “text-shadow” class. We’d need to update all instances of H4 with that class. It’s not always an easy or automated task across a large platform? And when we update the color from “text-grey-dark” (shared with seven other elements in our forms) to orange? Automating that could be far more strain?

I’m going to watch how this takes off as I do reserve the idea that updating a platform’s brand—for example when bought by a bigger brand, it could be far more effort than for strategies that fully separate HTML and CSS concerns.

That said, Sarah’s demonstrations did make sound sense? I seem to have one leg either side of a fence. Perhaps, as with so many decisions in design, it depends?

Leave a Reply