Single-Responsibility Classes for CSS
Published on (updated on )
In 2015, I created Single, an experimental CSS library focused on utility-first, single-responsibility classes, inspired by the principles of Atomic CSS and the syntax of Emmet.
The goal was to test whether a statically generated library would be practical to develop and use.
Results? It isn’t. Here’s why:
If the library tries to provide enough flexibility and a wide range of options, the generated stylesheet will be bloated and full of classes that would probably never be used.
The only way to avoid this is to have a very narrow scope, which will result in less flexibility, fewer options, and ultimately limit the library’s usefulness.
If you want a flexible utility-first library, the only real option is if it autogenerates the classes you actually use.
For context, Tailwind CSS, which started as a statically generated library in 2017, eventually reached similar conclusions (largely thanks to Windi CSS) and developed its own on-demand JIT engine, generating classes only when needed.
Anthony Fu, the author of Windi CSS, wrote a great article titled “Reimagine Atomic CSS”. If you’re interested in this topic, I highly recommend giving it a read.
If you’re interested in the history and evolution of utility-first CSS architecture, check out this great interview with Thierry Koblentz: “The Making of Atomic CSS”.