Utility-Classes

Writing CSS that scales is notoriously hard, even when you’re great at it. It often starts well, when you’re crafting the foundations have full control. But soon, unforeseen requests start arriving, the layout you’ve built is being moved around, and you have to undo most of what you’ve done. Soon, you realize that your component-based architecture isn’t as resilient as you thought, and it feels like the best thing you can do is to start over.

If ya gotta use ’em, use ’em. But don’t let them break the world.

The atomic approach to writing CSS is awesome—with caveats.

Where exactly do utility classes fit in to a scalable CSS system? Why, when, and how should they be used?

by Sarah Dayan Photo by Iker Urteaga on UnsplashIn Defense of Utility-First CSS“Favor composition over inheritance”. This piece of wisdom from Design Patterns, one of the most influential software engineering books, is the foundation of utility-first CSS. It also shares many principles with functional programming: immutability, composability, predictability, and

Last year at Mud we adopted a utility-first approach to CSS (also known as atomic CSS). Specifically we decided to use TailwindCSS, a…

Tips, tricks and tutorials on the web’s most beautiful language.

These are my favorite CSS utility classes. I take them everywhere.

Half a decade after the first commit of the pioneering ACSS, utility-first CSS is more popular than ever. With success comes many adepts but also a fair shar...

Naming conventions that frameworks and design systems use when it comes to typography, especially headings sizing.

Over the last several years, the way I write CSS has transitioned from a "semantic" approach to something more like what people call "functional CSS." In this post I explain how I got to this point and share some of the lessons and insights I've picked up along the way.

.u-glue is a CSS utility class (or what I would call an algorithm) that provides an API for positioning an element absolutely over another element. We are using it at PMC, and it's proven a useful model!

Over the last several years, the way I write CSS has transitioned from a "semantic" approach to something more like what people call "functional CSS." In this post I explain how I got to this point and share some of the lessons and insights I've picked up along the way.