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
.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.
Media queries are essential for doing Responsive Design. They can test for many features beyond browser width. We can use one of them to build a dark mode.
With @supports, we can start using features that will come to CSS soon in supporting browsers today.
Instead of navigating many layers of directories when importing files, we can use aliases that cover that error-prone part for us.