Improving site performance by shipping more CSS

This describes how GitHub’s Primer Design System moved off CSS-in-JS to improve performance across github.com. Growth in component count made client-side style initialization slow initial page loads, degraded server-side rendering as style collection shifted, and made style updates hard to manage. The chosen solution was CSS Modules: native CSS files colocated with components, class names local by default to avoid global collisions, and no client or server runtime required. Styles bundle into static stylesheets delivered with the HTML, eliminating the runtime costs and providing the encapsulation the team wanted.

The migration required changing every Primer component and any other components using the old technique, so the team adopted an incremental, nonbreaking rollout. For each component they translated existing styles into a CSS Module file and wrapped the change in a feature flag that toggled between old and new styling, allowing both systems to coexist during migration. Using the design system as the vehicle for change let updates scale safely across the product. The net impact: faster initial loads, improved server-side rendering performance, reduced runtime complexity, and more manageable styling as component counts continue to grow.