Utility First CSS Isn’t Inline Styles
summary
Claim: utility‑first (atomic) classes are not inline styles because they live in stylesheets and therefore support pseudo‑classes and media queries, complex selectors like group-hover and sibling selectors, and state‑driven relationships (example: showing custom error siblings for out‑of‑range inputs). Evidence: used at Algolia and cacheable for up to a year, so styles grow logarithmically versus HTML changing linearly. Practical outcome: a reusable, bounded design system of single‑purposed classes that enforces tokens and enables aggressive caching.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 1:10Utility classes vs inline styles
- 10:21Local vs contextual power
- 17:10Context and systems design
- 25:26Caching atomic CSS
- 30:05HTML/CSS lifecycle
- 35:45Summary
- 40:51Q&A
related talks
05mUtility of Inline Styles
18mIn Defense of Utility-First CSS
01h 11mUtility-first CSS: The highs and lows of styling web sites
40mThe ABC's of Architecting Better CSS
45mA real-life journey into the opinionated world of 'utility-first' CSS
31mInline Styles: themes, media queries, contexts, & when it's best to use CSS
23mCSS-in-JS
51mFrom Semantic CSS to Utility-First