Ein Living Styleguide ist eine Dokumentation der Oberflächenbausteine, die aus dem tatsächlich eingesetzten Code erzeugt wird. Jeder gezeigte Button ist derselbe Button, den auch die Website ausliefert. Damit kann die Dokumentation nicht veralten, solange sie gebaut wird.
- Living Styleguide
Dokumentation der Bausteine einer Oberfläche, die direkt aus dem Produktivcode erzeugt wird und sich mit ihm verändert.
Beispiel: „Schau in den Living Styleguide, dort siehst du alle Zustände der Komponente.“Abgrenzung zum klassischen Styleguide: Ein klassischer Styleguide ist ein Dokument mit Abbildungen. Er beschreibt einen Stand und weicht mit jeder Änderung am Produkt weiter davon ab.
Warum die Kopplung an den Code der Kern ist
Jede Dokumentation, die von Hand gepflegt wird, driftet. Nach einem halben Jahr zeigt das PDF eine Schaltfläche, die es so nicht mehr gibt, und niemand weiß mehr, welche Fassung gilt. Ein Living Styleguide löst das, indem er keine eigene Wahrheit hat: Er lädt dieselben Komponenten und Stile wie die Anwendung und zeigt sie nebeneinander mit ihren Zuständen und den Angaben, wie sie eingebunden werden.
Wer damit arbeitet
Der Nutzen wächst mit der Zahl der Beteiligten. Neue Entwickler sehen, was es bereits gibt, statt ein vorhandenes Element ein zweites Mal zu bauen. Redakteure erkennen, welche Bausteine ihnen im Editor zur Verfügung stehen, und können den Aufbau einer Seite planen, bevor sie ihn anlegen. In Abstimmungen mit dem Kunden lässt sich auf einen Stand zeigen, der garantiert aktuell ist.
Für die Qualitätssicherung ist der Styleguide außerdem der bequemste Ort, um einen Baustein isoliert zu prüfen. Barrierefreiheit, Tastaturbedienung und Kontraste lassen sich dort ohne die Seite drumherum testen, und ein Fehler ist eindeutig einem Baustein zuzuordnen statt einer Seite.
Womit er gebaut wird
In Projekten mit Komponenten-Frameworks ist Storybook das verbreitetste Werkzeug: Es lädt die Komponenten der Anwendung und zeigt sie in wählbaren Zuständen. In klassischen CMS-Projekten übernimmt das oft eine eigene Seite im Frontend, die dieselben Partials einbindet wie die Website. Der Weg ist zweitrangig, entscheidend bleibt, dass keine Kopie entsteht.
Aufwand und Grenzen
Der Styleguide muss mitgepflegt werden, sonst dokumentiert er nur die Bausteine der ersten Wochen. In der Praxis hält er sich am besten, wenn das Anlegen eines neuen Bausteins ohne seinen Eintrag im Styleguide gar nicht als fertig gilt. Für kleine Websites steht der Aufwand selten dafür; ab einem Team, das über mehrere Jahre an derselben Oberfläche arbeitet, spart er mehr Zeit, als er kostet.