Learning CSS with utilities

One of the premises behind Bootstrap’s utilities is that each property: value pairing is attached to a class named after that pair—.property-value. Because of this pattern, creating and using utilities is an incredibly effective technique for learning CSS.

When I wasn’t as familiar with flexbox, the CSS-Tricks cheat sheet was indispensable, but I still found myself having to go back to it time and time again. Same with CSS Grid.

Originally added in v4 and refined in v5, Bootstrap has flexbox utilities and a flexbox-based grid to use flexbox instead of floats. With the need for a slew of new supporting utilities, I taught myself flexbox by writing out every new class we’d need.

.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
// etc

Writing all these out by hand for v4 gave me the muscle memory to remember specific patterns and behaviors for flexbox properties and values. It’s incredibly helpful that learning Bootstrap (and Tailwind, Rebass, Atomic, etc) is very much akin to learning CSS itself. Regardless of the tooling, you have to learn the properties and values, so why not get in the habit of writing them from the start?

Utility driven frontend isn’t going anywhere, and neither is component driven frontend. They ebb and flow, and if you can understand what’s underneath them, you’re in the best position to learn any other tools and languages.