Javascript Style Sheets
summary
Claims a JavaScript-to-CSS system (first released Oct 2014) that compiles styles to regular CSS with lazy compilation and ref counting, generates conflict‑free class names, and caches rules so a stylesheet is emitted once and reused. Shows support for media queries, keyframes, pseudo selectors, vendor prefixing via plugins, and an inheritance plugin that injects resets. Core is <4KB minified, and the presenter reports up to 50% smaller CSS payloads in practice.
AI-written summary · about
chapters (28)
- 0:00Intro
- 0:27React and CSS
- 1:49First JSS release
- 3:29Inline styles
- 4:42Global Namespace
- 5:19Implicit Dependencies
- 6:13Minification
- 6:34Sharing Constants
- 7:33Non-deterministic Resolution
- 10:263 Categories
- 10:48Pure Inline
- 11:07Mixed Mode
- 11:41Pure Style Sheets
- 12:41How does it work.
- 14:08Example with React
- 15:54Media Queries
- 16:43Keyframes Animation
- 17:32Font Face
- 19:02Rules Caching
- 19:29Rules Sharing
- 19:59Class Names are fast.
- 21:15Tools Agnostic
- 21:40Extensible
- 21:55Vendor Prefixer Plugin
- 22:12Inheritance
- 22:49Unsolved Problems
- 23:43No standard DSL
- 23:53Missing dev tools
related talks
23mCSS-in-JS
28mSee the Past, Present, and Future of CSS-in-JS
27mBringing Back the 1990s: The Revenge of JavaScript Style Sheets
58mCSS in JS: What For and Why?
39m"CSS in JS - The good, The bad and The ugly"
40mBringing back the 1990s: The revenge of JavaScript Style Sheets
04mCSS in JS without Compromise
24mCSS in a Components World