Whelp, hell has frozen over. For years, I have been vocal about my support for the BEM-approach to writing CSS. Following BEM, we give elements we want to style a single semantic class that describes what it does. The title of a blog post could be called
.blog__title, its description
.blog__description. Once you get past the ugly underscores, it’s a really solid approach. Recently, some interesting alternatives are gaining momentum.
In utility-first CSS, we do almost the exact opposite of BEM. We do not limit ourselves to single classes. We don’t even keep styling-information out of our HTML. Instead, we use many small classes that each add small pieces of styling. Its classes have names like
.text-bold. We style elements by adding many of these descriptive classes to them. Tailwind CSS is a popular framework that does this really well.
Utility-first CSS needs a lot of very small and similar classes. Next to
.background-red, we could also need
.background-green, and others. Writing many of those by hand is annoying. With Sass in our toolkit, we can auto-generate a lot of these classes. To really understand how it works, you might want to roll your own utility-first framework. My recent post on writing utility-first CSS with Sass helps you get started.