The Cascade is a blog about the past, present, and future of CSS.

Howdy—Robin Rendle here.

We’re living through a golden age: CSS was once a language that was easy to make fun of but has now transformed into a serious and expressive toolkit for building visual interfaces. Although making fun of CSS was always lame, today, in 2024, it shows a deep lack of curiosity. The train has left the station. CSS rules. Get with the program.

But this didn’t happen randomly. Thousands of dedicated, smart folks have worked tirelessly over decades to get us to this point where CSS is—in this humble blogger’s opinion—the best design tool ever made. Every day some new super power is unlocked for us in browsers and with each new power the web becomes a better place, thanks to them.

So this blog exists to keep me in the loop and somewhat up to date with everything that’s possible with CSS but also it’s a reminder to celebrate the people doing the hard work building these tools for us.

You can subscribe to The Cascade via RSS, shoot me an email if you absolutely must, or follow the feed. This project is directly supported by readers and the membership program.

Right now the newsletter is taking a bit of a break whilst I figure out a healthy publishing cadence, but you can subscribe below:

How to create CSS utility classes

Just last week Andy Bell wrote about his CSS boilerplate for starting new projects. But the part that caught my eye was the way that he’s using Tailwind to generate CSS utility classes like this:

.m-l-10 {
	margin-left: 10px;
}
.m-r-10 {
	margin-right: 10px;
}

In my experience, utility classes in CSS—think Tailwind of Tachyons—tends to be a nightmare but a limited subset of them such as spacing classes or typographic helpers like this are genuinely handy. The problem is that you’ve often got to pick all of them outta those kinds of CSS frameworks or write your own by hand which is error prone and slow.

So Andy has a JSON file for each design token, like colors, spacing, font-size, which he then runs through Tailwind to create the classes. Then he imports that directly into his CSS. My first thought was: whoa! For every new project it must be amazing to tweak a few variables in a JSON file, run a command, and get a fresh batch of CSS utilities.

The other day I then spotted that Saneef Ansari was inspired by all this and made a PostCSS plugin to do the same thing, except without Tailwind as a dependency. These design utilities then get converted into CSS custom properties like this:

:root {
	--color-accent: #16a34a;
	--color-dark: #111827;
	--color-light: #f3f4f6;
	--space-xs: 0.25rem;
	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 2rem;
}

And you can also create the CSS utility classes with a single line of code!

That’s...extremely neat! My only jerky thought here is this: what if I didn’t want to use PostCSS as a dependency either? I could imagine a website where I just import some JSON or write my own classes, hit a button, and then export either a list of CSS classes...

.bg-dark {
	background: #333;
}
.bg-light {
	background: #fff;
}

...or custom properties...

:root {
	--bg-dark: #333;
	--bg-light: #fff;
}

...or both! Then I’m free to slam that into any project regardless of how it’s built and so I don’t need to even have npm as a dependency.