brainbits Blog

Automatisierte Styleguides

Niklas Köhler17.11.2016Anwendungsentwicklung • Code • Frontend

Schaut man sich das Layout einer Website genauer an, so stellt man fest, dass sich viele Elemente ähneln und wiederholen. Wächst ein Projekt mit der Zeit, verliert man schnell die Übersicht über all diese Elemente sowie deren Varianten. Dies kann zu einem unnötig wachsenden CSS führen.

Dazu kommt noch: sind mehrere Entwickler an einem Projekt beteiligt, so können diese nicht genau einsehen, welches Element bereits existiert. Parallel müssen sich Grafiker durch unzählige Layouts wühlen und prüfen, ob dieses Element bereits gestaltet wurde.

Besser wäre es hier, Elemente zusammenzufassen und einheitlich zu gestalten. 

Bessere Übersicht durch Komponenten

Wir haben uns gefragt, wie wir dieses Problem lösen können. Also begannen wir damit, die Site zu „komponentisieren“. Das heißt: das komplette Layout einer Website wird in viele kleine Einzelteile zerlegt. Anschließend werden Parallelen der einzelnen Elemente gesucht und benannt. Mit Hilfe von Namenskonventionen wie BEM oder RSCSS lassen sich diese Komponenten problemlos in CSS integrieren.

Layout in Einzelteile zerlegen

Das war uns aber nicht genug. Wir wollten unseren Grafikern, unseren Konzeptern und unseren Kunden ein Werkzeug an die Hand geben, mit dem sie eine Übersicht aller im Projekt vorhandenen Komponenten erhalten. Außerdem wollten wir es unseren Entwicklern so angenehm wie möglich machen, diese zu pflegen und zu dokumentieren. Dies war die Geburtsstunde des automatisierten Styleguide-Generators: Ein auf dgeni basierender Dokumentationsgenerator.

Im ersten Schritt überlegten wir, wo wir die nötigen Informationen der Komponente ablegen. Wir entschieden uns dafür, sie in docblocks überhalb der jeweiligen Komponente zu platzieren.

docblocks über der Komponente

Im nächsten Schritt mussten wir die nötigen dgeni-Prozessoren bauen. Hierfür entwarfen wir einen SCSS-Parse-Prozessor, der jede in dem Projekt befindliche SCSS-Datei ausliest, analysiert und die jeweiligen Informationen extrahiert.

Zum Schluss bauten wir einen eigenen App-Prozessor. Dieser nimmt das vom SCSS-Prozessor generierte Doc-Array entgegen und generiert eine JSON-Datei. Zusätzlich generiert er eine auf React basierende App, die die JSON-Datei interpretiert und als Website ausspielt.

Per Gulp oder Grunt kann nun der Generator beliebig konfiguriert und in jedes beliebige Projekt integriert werden.

Konfiguration des Styleguide-Generators

Welche Vorteile bringt der Styleguide-Generator?

Da jede einzelne Komponente komplett abgekapselt vom gesamten Projekt existiert, können wir sie ohne großen Aufwand in ein anderes Projekt implementieren. Darüber hinaus erleichtert uns dieses Vorgehen, Fehler schneller zu lokalisieren und zu beheben. Ein weiterer Vorteil ist, dass nun mehrere Entwickler gleichzeitig an einer Website arbeiten können, ohne sich dadurch in die Quere zu kommen. Letztendlich konnten wir eine Schnittpunktbasis für Kunden, Entwickler, Konzeption und Gestaltung schaffen.

 

Niklas ist seit 2013 Frontend-Developer bei brainbits. Als Experte für CSS, Responsive Webdesign und mobiles Internet sorgt er dafür, dass auch hinter der schicken Oberfläche alles seine Ordnung hat.

Zurück zur Übersicht