Reading Time: < 1 minutesDuring 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?
Discussion
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?