How JavaScript Changed CSS
summary
The talk explains how JavaScript changed how CSS is authored and delivered: Node and PostCSS enable Sass and CSS Modules to be compiled in a JS build so styles are file-scoped and loaded on import; runtime JS objects share breakpoints and color tokens with Sass. It covers CSS Modules to avoid global classname collisions, styled-components for component-scoped, testable styles that can export to design tools, visual regression testing with Backstop and Storybook in CI, and the emerging Houdini Paint API in Chrome Canary for JS-driven paint worklets.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:50JavaScript in CSS history
- 5:02JavaScript for CSS
- 7:08CSS Modules fixes
- 10:47CSS class conflicts
- 12:35Sass and JS variables
- 15:50Dynamic breakpoints
- 17:39Runtime CSS
- 19:03Custom props animations
- 20:12Reducing repetitive code
- 21:17Testing CSS with JS
- 22:44Styled components
- 25:46Component design tools
- 26:07Automated visual testing
- 28:17Houdini future
- 30:01Houdini possibilities
- 30:44Conclusion
