The Quest of the Styling Grail
summary
Claim: reshadow gives a Shadow DOM Developer Experience for the Virtual DOM, mixing declarative CSS selectors for tags Components and props with efficient runtime and compile time processing. Concrete results: static extraction of styles (no runtime parsing), component selectors and modifiers, faster benchmarks versus styled-components (styled-components crashes at ~1000 boxes), about 90% compatibility with styled-components, and dependency injection that enables theming and hundreds of A/B experiments without changing product code.
AI-written summary · about
chapters (20)
- 0:00Intro
- 0:58CSS vs JS
- 5:40Problems with CSS
- 6:57BAM
- 10:00Systems
- 19:27StateDriven Styling
- 24:05How to change components
- 26:02How to markup components
- 26:41Nested components
- 27:26Styling components
- 27:58Experiments
- 29:18Magic
- 30:10Modifiers
- 30:47Performance
- 31:47Example
- 32:44Semantics
- 33:13Static Starts Analysis
- 33:38Her Shadow
- 34:02Feedback
- 34:17Conclusion
related talks
51mShining Light on the Shadow DOM
47mThe road to styled components, and the road ahead
50mKeeping Your CSS Small: scopes, containers, and other new stuff
23mThe road to styled components: CSS in component-based systems
07mReact Components and How To Style Them
31mThe road to <💅> styled-components" CSS in component-based systems"
22mStyled Components
16mCSS, Design Systems & Developer Experience