In Defense of Utility-First CSS
summary
Argues that switching to utility-first CSS—atomic classes tied to a style guide, composed in HTML—lets a growing site change without brittle selectors, and reports concrete wins from a documentation redesign: 60% smaller CSS after rewriting, a simulated semantic-hash test showing differences compress to 1.5–3 KB after gzip, an experiment replacing semantics with utilities, and faster rendering because classes are one-level deep, so overall a faster parsing and more maintainable result.
AI-written summary · about
chapters (5)
- 0:00Start
- 3:02CSS Zen Garden is a technical demonstration, not a best practice.
- 6:15CSS works better when used as a library.
- 9:03Complex Ul components aren't that reusable.
- 11:14Reusing small atoms is more resilient.
related talks
45mA real-life journey into the opinionated world of 'utility-first' CSS
01h 11mUtility-first CSS: The highs and lows of styling web sites
51mFrom Semantic CSS to Utility-First
52mUtility First CSS Isn’t Inline Styles
28mClass 🥊Clash
15mWrite Less CSS
31mIn Defence of CSS and the Cascade
33mCSS for Software Engineers for CSS Developers