CSS in JS: What For and Why?
summary
Overview of CSS-in-JS: why use it, how it works, and how it supports dynamic CSS. Compares existing libraries and their differences, presents the approach the author’s team uses and why, and describes experiments (a browser extension and a Service Worker) for caching generated CSS, with many concrete examples.
AI-written summary · about
chapters (31)
- 0:00Introduction
- 1:19CSS in JS benefits
- 6:21Dynamic CSS with JS
- 8:28Code reduction
- 9:31DRY and variables
- 10:59Clean code
- 12:24No configs
- 13:06Regular styles problems
- 14:32IDE and DOM issues
- 15:35CSS in JS libraries
- 17:36JSS pros and cons
- 20:05Aphrodite approach
- 23:17Fela features
- 24:43Styled Components strengths
- 27:15Styled Components perf
- 29:00Ideal library
- 30:26Why we built ours
- 31:54Composition
- 33:43Unique class names
- 35:48Readable class names
- 36:52Components with states
- 37:58Properties table
- 39:43Main reason
- 41:05Template literals
- 42:10Parsing CSS strings
- 44:42Parsing optimization
- 46:08Inserting styles
- 48:15Runtime optimization
- 51:55Production solutions
- 54:27Resources
- 55:53Q&A
