A thorough analysis of CSS-in-JS
summary
A two‑month study inspects ~20 CSS‑in‑JS projects and narrows to 11, concluding there are two mutually exclusive outputs: runtime stylesheets (most libraries) and static css extraction (vanilla‑extract, Linaria, astroturf, stylex); runtime injects CSS at runtime and duplicates critical css shipped twice when SSR is used, favoring CSR and faster first paint, while static extraction yields smaller transfer size and better caching, favoring SSR/static sites; slides and full data live on the uploader's GitHub link.
AI-written summary · about
chapters (9)
- 0:00Introduction and study scope
- 1:29CSS-in-JS output methods
- 3:46How the two methods work
- 5:36Performance: File size
- 7:36Performance: Time and metrics
- 10:51Visualizing loading behavior
- 13:47Conclusions and recommendations
- 16:05Library adoption and closing
- 17:24Q&A session
related talks
28mSee the Past, Present, and Future of CSS-in-JS
39m"CSS in JS - The good, The bad and The ugly"
23mCSS-in-JS
33mThe past, present and future of CSS-in-JS
31mUnique Value Proposition of CSSinJS and the Future
26mCSS in JS: The Good & The Bad Parts
58mCSS in JS: What For and Why?
28mCSS in JS - beware the Hype!