What is utility-first CSS? | Heydon Pickering

As acerbic and cutting a critique of utility-first CSS (and that particular framework) as you would expect from Heydon, but hidden amongst the humour are some (also equally expected) jewels of wisdom. It's not that Tailwind and utility-first CSS are automatically bad; they have their place. But when taken as the end-all solution for CSS, they cross a line that becomes hard to ignore.

On how utility-first CSS both requires a solid knowledge of CSS to work well, and is least appealing to those that have that knowledge in the first place:

However, paradoxically, the more you learn about CSS, the less you may appreciate utility-first CSS. You might begin to question why it should exist at all.

On inheritance and the cascade, and how they can save you a huge amount of code if embraced:

In fact, I believe there’s a kind of CSS 80/20 rule wherein about 80% of your styling should be done with just 20% (or less!) of your CSS.

On where utility classes are most beneficial:

Where utility classes come in is they allow you to make occasional exceptions to these generalized styling rules.

On the innate paradox at the core of "utility-first CSS":

Utility-first CSS is exception-first CSS. And that’s not how exceptions work, in CSS or in general.

On how utility-first CSS is really only beneficial when there are a lot of design differences across an interface, and how that's probably a big ol' red flag:

To put it another way, show me a design for an interface that benefits from being coded using utility-first CSS and I will show you an interface that is fundamentally f**ked.

On Tailwind and utility-first frameworks:

So what is Tailwind really? It’s just CSS with extra steps and a brand name. Then again, you can say that about most any CSS framework.

On the fallacy of chasing the new and shiny, and believing that more recent ideas are automatically better:

But CSS isn’t new, it’s only good. And in this backwards, bullshit-optimized economy of garbage and nonsense, good isn’t bad enough.

Explore Other Notes

Older

PWA quickstart

An interesting – albeit flawed – attempt at a zero-dependencies, web standards focused, PWA based UI framework, and a potentially useful quick-start template for using web components and native […]
  • As acerbic and cutting a critique of utility-first CSS (and <em>that</em> particular framework) as you would expect from Heydon, but hidden amongst the humour are some (also equally expected) jewels [&#8230;]
  • Murray Adcock.
Journal permalink