128: Alasdair Monk - Scaling CSS at Heroku with Utility Classes

What It Covers

Alasdair Monk explains how Heroku migrated from Bootstrap to Tachyons atomic CSS framework, solving CSS sprawl across multiple applications. He details the mental model shift, team adoption challenges, and performance benefits of utility-first CSS at scale.

Key Questions Answered

• •CSS Deletion Problem: Traditional BEM approaches created tight coupling between HTML and CSS where deleting templates left orphaned styles. Atomic CSS eliminates this by making HTML deletable without worrying about unused CSS, since the utility library remains constant regardless of features added or removed over time.
• •Library Size Stability: Purple Three utility library size remained nearly constant over three years despite adding numerous features. Traditional CSS files would have grown continuously with each new interface. The atomic approach provides hundreds of classes upfront that never need expansion, making it more scalable than custom CSS per feature.
• •Cross-Framework Portability: Heroku supports React, Ember, Rails with jQuery, and static HTML across different teams. Creating CSS classes for simple elements like buttons and inputs proved more practical than framework-specific components, since CSS works everywhere while JavaScript components require rewriting for each stack. Web components may eventually solve this.
• •Developer Experience Shift: Frontend complexity increased dramatically over seven years with single-page apps and JavaScript frameworks. Treating CSS as an API through utility classes lets developers focus on keyboard navigation, accessibility, and user experience details rather than memorizing Flexbox alignment rules or crafting perfect box shadows for every component.
• •Pragmatic Component Approach: Teams delete and rewrite templates from scratch rather than maintaining complex HTML documents during redesigns. The low cost of rewriting with utility classes makes this faster than parsing existing markup. For hyper-specific styling needs, scoped CSS files live alongside components, similar to Vue single-file component style blocks.