Class 🥊Clash
summary
Argues that adopting a utility-first system cuts CSS bloat and speeds prototyping: a demo refactors a semantic grid into tachyons.io, deletes the stylesheet and yields the same responsive layout, while noting about 15k of CSS for the library, about 97% unused CSS examples from big sites, and 50% of components still needing custom rules. Claims a two–three week comfort period, recommends componentizing strings and prefixing globals, and warns against importing full libraries for tiny changes.
AI-written summary · about
chapters (38)
- 0:00Introduction
- 1:20What is functional CSS
- 1:39Classes
- 2:00Lego
- 2:19W100
- 3:12Functional CSS
- 3:59Function
- 4:19Markup
- 4:44Functional Programming
- 7:45Separation of Concerns
- 9:00Adam Lawson
- 9:19Its not dry
- 11:48Problems
- 12:01Performance
- 12:15Dev time bloat
- 12:45CSS and scalability
- 13:23Adams example
- 13:54Scalability
- 15:10Decoupling Styles
- 15:39Legos
- 15:58Minimize context switching
- 16:41Functional Styles
- 17:26Taitons
- 17:56Scale
- 18:22Drag queens
- 18:49Traditional approach
- 19:11Media queries
- 19:26CDN
- 20:12CSS
- 22:06Reuse
- 22:32Design Systems
- 23:17Production
- 23:51Component Scope
- 24:15Prefixes
- 24:55Learn CSS
- 25:17Dont Import Full Library
- 26:02Write Your Own CSS Component
- 26:49Conclusion
related talks
45mA real-life journey into the opinionated world of 'utility-first' CSS
18mIn Defense of Utility-First CSS
01h 11mUtility-first CSS: The highs and lows of styling web sites
33mGet the core right and the resilient code will follow
23mCSS-in-JS
34mFirst Class Styles
39m"CSS in JS - The good, The bad and The ugly"
38mModular CSS