Primer Design System stellt die grundlegenden Komponenten für Erlebnisse wie Schaltflächen, Banner und Breadcrumbs auf GitHub bereit. Diese Komponenten müssen in unterschiedlichen Szenarien zugänglich, flexibel und leistungsfähig sein.
2023 stieg die Zahl der Komponenten auf einigen Seiten rapide an, wodurch sich im bestehenden CSS-in-JS-Lösungsansatz folgende Probleme ergaben:
- Die ersten Seitenladevorgänge verlängerten sich, da die Stile auf dem Client initialisiert wurden.
- Die Verlagerung der Stilsammlung weg vom Client verringerte die Performance der serverseitigen Erstellung.
- Mit zunehmender Zahl der Komponenten auf der Seite gerieten Stilaktualisierungen außer Kontrolle.
Das Primer-Team suchte nach einer Lösung, die die Client- und Serverkosten beseitigen und während der Umstellung keine Brüche auf GitHub verursachen würde. CSS Modules ermöglichte die Verwendung lokaler CSS-Eigenschaften und bewahrte zugleich den bestimmten Grad an Kapselung, der von CSS-in-JS erwartet wurde. Die Stile sollten in CSS-Dateien neben der JavaScript-Quelle geschrieben werden; Klassennamen sollten standardmäßig lokal sein, und es sollte keine Client- oder Server-Laufzeit erforderlich sein. Stattdessen sollten die Stile in CSS-Dateien zusammengeführt werden, die mit dem HTML ausgeliefert werden.
Für die Umstellung wurden bei jeder Komponente folgende Schritte durchgeführt:
- Eine neue Datei wurde hinzugefügt, die die bestehenden Stile in CSS Modules überführte.
- Es wurde ein Feature-Flag verwendet, das zwischen den alten und neuen Stilen auswählte.
- Mit visuellen Regressionstests wurde überprüft, dass die Screenshots identisch waren.
- Das Flag wurde schrittweise zunächst für das Team, dann für die GitHub-Mitarbeiter und anschließend für alle Nutzer aktiviert.
Dieser Prozess lieferte frühzeitig Feedback. Im Dezember 2024 waren alle Komponenten in Primer auf CSS Modules umgestellt.
Warum das wichtig ist
Diese Änderung zeigt, dass das Stilmanagement in Benutzeroberflächen mit wachsender Komponentenanzahl nicht nur die Entwicklererfahrung, sondern auch das Laden der Seite und die serverseitigen Verarbeitungskosten beeinflusst. Die Zusammenführung der Stile in Dateien, die zusammen mit dem HTML ausgeliefert werden, anstatt sie zur Laufzeit zu verarbeiten, zielt darauf ab, Prozesse zu reduzieren, die auf der Client- und Serverseite zusätzliche Last verursachen. Die Aufteilung der Umstellung in kleinere Schritte mithilfe von Feature-Flags und visuellen Regressionstests ist wichtig, damit technische Änderungen in häufig verwendeten Designsystemen erprobt werden können, ohne beim Nutzer sichtbare Brüche zu verursachen. Das frühzeitige Einholen von Feedback ermöglichte zudem, das Problem nicht nur auf Codeebene, sondern auch anhand der Bildschirme zu beobachten, mit denen Teams und Nutzer konfrontiert waren. Allerdings enthält der Bericht keine Bewertung dazu, wie dieser Ansatz in Designsystemen außerhalb von Primer ausfallen würde.