GitHub wechselt von CSS-in-JS zu CSS Modules und rendert schneller
Victoria Shinder2 Min. LesezeitGitHubs Engineering-Blog hat am 25. September beschrieben, wie die Website ihr Styling von CSS-in-JS auf CSS Modules umgestellt hat - eine Migration, die im Designsystem Primer begann und damit endete, dass github.com seit Juni 2026 vollständig mit CSS Modules läuft.
Der Anlass war die Leistung. Als ab 2023 die Zahl der Komponenten auf manchen Seiten wuchs, führte CSS-in-JS dazu, dass Styles im Client initialisiert wurden, das serverseitige Rendern langsamer wurde, weil die Sammlung der Styles dorthin wanderte, und Style-Aktualisierungen mit jeder Komponente zunahmen. CSS Modules legen die Styles in einer CSS-Datei neben jede Komponente, machen Klassennamen standardmäßig lokal und brauchen weder im Client noch auf dem Server eine Laufzeit. Laut Beitrag sank nach der Migration der Primer-Komponenten bis Dezember 2024 die Zeit für serverseitiges Rendern um 55 Prozent und die Initialisierung der Komponenten um 25 Prozent.
Schwieriger war der Rest von GitHub. Teams hatten Primer-Komponenten jahrelang über eine Prop sx angepasst; zu Spitzenzeiten waren rund 7.760 davon zu migrieren. GitHub baute eine Wrapper-Bibliothek, damit bestehende sx-Nutzung weiter funktionierte, während neuer Code die migrierten Komponenten direkt importierte, und stellte dann Paket für Paket um. Eine Rotation von acht Entwicklern migrierte in sechs Monaten 6.419 Props mit einem VS-Code-Plugin und einem Codemod und sah auf manchen Seiten Gewinne beim Server-Rendering von 1 bis 22 Prozent; die letzten 895 entfernten zwei Entwickler in drei Wochen mit Copilot-Coding-Agenten. Danach mussten sieben Themes mit je einer Hochkontrast-Variante von styled-components gelöst werden, bevor die Abhängigkeit wegfallen konnte. Jeder Schritt lief hinter Feature-Flags - laut Beitrag sogar das Entfernen der Abhängigkeit selbst.
Was das bedeutet
Die Schlagzeilenzahl gehört dem Designsystem, die Lehre der Migration. GitHub prüfte, dass die Snapshots der visuellen Regressionstests für alte und neue Styles identisch waren, rollte jede Änderung erst für das Team, dann für Mitarbeiter, dann für alle aus und hielt den alten Weg am Leben, bis ihn niemand mehr nutzte. Das ist langsam - und so ändert ein großes Produkt seine Grundlagen, ohne dass Nutzer es merken.
Auch das Detail zu den letzten 895 Props verdient genaues Lesen: Die Automatisierung half am meisten am Ende, als die übrigen Fälle bekannt und die Muster eingespielt waren, nicht am Anfang.