CSS that has a tail wind

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 .background-red, .margin-10, and .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-blue, .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.