CSS in React
summary
Compares five concrete approaches — CSS Modules, Styled Components, Glamorous and Emotion plus DCSS/style-system — showing how each actually works: CSS Modules turn styles into a JSON object and hashed classnames, DCSS exposes CSS as React components, styled-components uses tagged template literals, Glamorous uses JS objects, and Emotion can do both. Claims ~59 competing projects exist, demonstrates automation, shareable component libraries, responsive helpers, SSR critical-CSS, dead-CSS elimination and snapshot testing, and shows these techniques reduce payloads and improve maintainability.
AI-written summary · about
chapters (12)
- 0:00Intro
- 3:50Automation
- 5:26CSS Modules
- 11:08Making CSS shareable
- 11:45Bootstrap
- 12:47JavaScript
- 14:27Style Components
- 16:59Glamorous
- 20:45Style System
- 22:54State Logic
- 25:03Dead and Unused CSS
- 28:22Serverside Rendering
related talks
29mThe Lonely and Dark Road to Styling in React
23mCSS-in-JS
07mReact Components and How To Style Them
17mManage your styles as it's 2018
28mSee the Past, Present, and Future of CSS-in-JS
16mCSS, Design Systems & Developer Experience
27mStyles & SASSy: Choosing the Right React Styling Solution
31mThe Lonely and Dark Road to Styling in React