Improving site performance by shipping more CSS
GitHub migrated its UI from CSS-in-JS to CSS Modules, eliminating runtime overhead and significantly improving server-side rendering and component initialization performance.
read it It provides a detailed, real-world case study of executing a massive architectural migration at scale without breaking production.
summary
GitHub details its multi-year migration of the Primer Design System and dotcom codebase away from styled-components and runtime sx props to CSS Modules. Facing severe server-side rendering and client initialization bottlenecks as component counts grew, the team relied on feature flags, transitional wrapper libraries, and eventually Copilot coding agents. The effort culminated in June 2026 with 100% CSS Modules adoption, cutting SSR times by 55% and completing the final batch of dynamic style removals using AI agents.
key points
- Migrated the Primer Design System and GitHub dotcom from CSS-in-JS to CSS Modules, achieving a 55% reduction in server-side rendering time.
- Used an incremental strategy involving feature flags, visual regression tests, and a transitional wrapper library to prevent breaking production.
- Leveraged GitHub Copilot coding agents to eliminate the final 895 dynamic sx props across the codebase in just three weeks.
who should read it
Frontend engineers and web architects dealing with scale, design systems, and styling performance.
discussion positive
consensus
Commenters discuss the merits and pitfalls of moving away from CSS-in-JS, generally appreciating the pragmatic, incremental approach GitHub took for such a massive migration.
pushback
Some critics argue that GitHub's large total asset footprint and long development class names leave performance and bundle size optimization on the table.
There's room for improvement still. Currently, the production build is using long-dev class names. e.g. `DirectoryContent-module__Box_3__gl6dE` could be compiled to a shorter hash like `gl6DE3a2`.
If you use Vite:
css: { modules: { generateScopedName: mode === 'production' ? '[hash:base64:8]' : '[name]__[local]___[hash:base64:5]', } }
It highlights that GitHub uses long, unminified class names in production, which impacts payload size and parsing speed compared to short hashes.
Generated by an LLM from the article and thread. Check the sources before relying on it.