A directory of brand guidelines: logosearch.link

CSS that has a tail wind

Dom Habersack
Dom HabersackNovember 27, 2019
A bird sitting on a branch.
It doesn’t look like much, but wait until you see it fly.

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.

– Dom

Continue reading

A close view of the moon.
#66December 9, 2020

The easiest way to build a Dark Mode

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.

The sculpture of a hand holding up a heavy tree branch.
#26March 4, 2020

Progressive enhancement with @supports (with video tutorial)

With @supports, we can start using features that will come to CSS soon in supporting browsers today.

A bunch of balloons with either happy or sad faces drawn on them.
#78March 3, 2021

The end of annoying JavaScript imports

Instead of navigating many layers of directories when importing files, we can use aliases that cover that error-prone part for us.

Read all issues →