CSS is dead, long live CSS but in modules, please!
summary
Reports hands-on results: CSS Modules are implemented with webpack + css-loader (modules=true), style-loader and extract plugin to emit files, and css-modules-require-hook for tests so existing unit tests run unchanged. Composition, composes and importable value files replace many Sass needs. Worked: a shipped customer project, an OSS component library and two Outlook add-ins all ran cleanly with reduced CSS size. Shortcomings: some tooling gaps versus CSS-in-JS, limited inline-style features (pseudo elements, animations) and extra DOM bloat in alternative approaches.
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:30What makes CSS hard
- 0:47Global State
- 0:57Solutions
- 2:23What killed Globals
- 2:48Thought experiment
- 3:43Stylesheet module
- 4:52Stylesheet example
- 5:41Webpack setup
- 6:07Importing style sheets
- 7:01Global class names
- 7:11Local class names
- 7:57Unit tests
- 8:11Unit test setup
- 8:46CSS modules requirehook
- 9:29Extract extract plugin
- 10:28Better stuff
- 11:25Highorder component
- 12:51Composition
- 15:54Minification
- 17:48CSS vs JS
- 18:11CSS nsj
- 19:03CSS implementations
- 19:14No definite solution
- 19:46Inline Styles
- 20:07CSS reuse
- 20:22CSS complexity
- 21:25When to use CSS modules
- 23:04My personal experience
