§Single-Responsibility Classes for CSS
Published on (updated on )
In 2015, I created Single(opens in new tab), an experimental CSS library focused on utility-first, single-responsibility classes, inspired by the principles of Atomic CSS(opens in new tab) and the syntax of Emmet(opens in new tab).
The goal was to test whether a statically generated library would be practical to develop and use. It wasn’t.
A statically generated library either provides too many options, bloating the stylesheet with unused classes, or too few, limiting its usefulness.
The only viable option for a flexible utility-first library is to generate classes on demand, based on actual usage.
For context, Tailwind CSS(opens in new tab), which started as a statically generated library in 2017, eventually reached similar conclusions (largely thanks to Windi CSS(opens in new tab)) and developed its own on-demand JIT engine(opens in new tab), generating classes only when needed.
Anthony Fu(opens in new tab), the author of Windi CSS, wrote a great article titled “Reimagine Atomic CSS(opens in new tab)”. I highly recommend giving it a read.
For more on the history and evolution of utility-first CSS architecture, check out this interview with Thierry Koblentz: “The Making of Atomic CSS(opens in new tab)”.