Breaking up with the bundle
summary
GitHub has ~40,000 lines of custom CSS that block safe changes; measurement via a Datadog dashboard tracks lines added and hotspots. Tried splitting bundles per controller (cache and partials break reuse), hashing class names like CSS modules with per-component bundles via ViewComponent, and computing DOM style snapshots using the Chrome DevTools API wrapped by pherom to diff computed styles. Some experiments reduce regressions and ships nearly 50 open source components but overall debt grows and rewrite per page becomes the chosen path.
AI-written summary · about
chapters (9)
- 0:00Start
- 9:01Bad design doesn't break CI
- 10:02Human Cost
- 10:58Pit of failure
- 11:29Measurement Bundle splitting CSS encapsulation Style diffing
- 21:15Critical CSS
- 24:37Visual Regressions
- 24:47CSS is hard to test
- 27:26Style Snapshots
related talks
51mUnpacking Bundling
38mWhat to do when your bundle needs to go on a diet
29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website
43mPreprocessors, Components, and CSS in JS
34mFirst Class Styles
03mWith good naming convention, CSS works pretty well
55mRefactoring CSS
26mMoving on from runtime CSS-in-JS at scale