In the early days of CSS, we relied heavily on custom styles for everything, resulting in large, messy stylesheets. Then came utility-first CSS, which offered a way to build more efficiently by applying small, reusable classes directly to HTML.

But the real turning point for utility-first CSS came with the widespread adoption of Flexbox. Flexbox made it incredibly easy to handle layouts, alignment, and spacing with just a few utility classes. Suddenly, tasks that required dozens of lines of CSS could be achieved with a handful of utilities.

This shift towards Flexbox and utility-first CSS encouraged a more component-driven approach. Instead of writing custom styles for every element, we could create fully reusable, consistent components—cards, buttons, sliders—using utilities.

The final push that cemented this approach came with Figma’s adoption of Flexbox for layout positioning. Now, we can design our components in Figma using Flexbox settings, then translate those designs to the web with 100% accuracy using utility classes. The design-to-code workflow has never been smoother.

Today, our process focuses on using utility-first CSS for the foundation of our components, with custom styles reserved for the occasional unique requirement. This balance keeps our CSS small, consistent, and easy to maintain.