Layout-Komponenten – wieso, weshalb, warum?
Als Frontend-Entwickler kennt man es vermutlich: Wir bauen Komponenten, stecken sie im Interface wieder zusammen und setzen damit das Design um, das uns ein Designer anvertraut hat. Einige Zeit später sitzt man dann mit dem Designer zusammen und versucht, Fehler im Spacing zwischen einzelnen Komponenten kleinteilig zu korrigieren – hier ein paar Pixel, dort ein paar Pixel. Das passiert schnell, wenn Komponenten ihre eigenen Außenabstände mitbringen. Die kombinieren sich aus verschiedenen Gründen leider nicht immer so, wie es im Design eigentlich gedacht ist. Doch es gibt eine Lösung für dieses Problem: In einem unserer Projekte haben wir zum ersten Mal Layout-Komponenten eingesetzt. Layout-Komponenten bedeuten eine strikte Trennung von Inhaltskomponenten und allem, was diese auf dem Screen anordnet.
Eine wichtige Grundbedingung: Keine der Inhaltskomponenten definiert Außenabstände – wir verzichten also komplett auf margin. Dafür sorgen dann die Layout-Komponenten. Somit haben wir die Möglichkeit, die vom Design vorgesehenen Abstände einheitlich und harmonisch einzuhalten.
Aktuell nutzen wir dafür eine Box-Komponente (mit Innenabstand, ggf. Schatten, Border-Radius und einer Hintergrundfarbe), klassische Columns/Column-Komponenten, eine Stack-Komponente (vertikale Stapel mit Abständen, sehr einfach durch CSS Grid machbar) sowie eine Inline-Komponente für z.B. eine Liste von Tags, die im gleichen Abstand zueinander angeordnet werden sollen. Zudem nutzen wir Typographie-Komponenten für Absätze und Überschriften, die sich ebenfalls in das Layout-Konzept einfügen (siehe dazu ausführlich).
Aus diesen Basis-Komponenten stecken wir dann je nach Bedarf weitere, komplexere Komponenten zusammen.
Vorteile
Zunächst erscheint es recht mühsam, diese strenge Trennung zwischen Inhalt und Layout hinzubekommen. Mittlerweile stellt sich jedoch heraus:
- Die Abstimmung mit unseren UI-Designern ist wesentlich einfacher. Es gibt ein vordefiniertes Set an Spacings, so dass wir Sketch-Mockups schneller in Code übertragen können. Abstände einzeln vermessen und als "magic numbers" in den Code einfließen lassen geschieht nur noch in Ausnahmefällen.
- Für wiederkehrende responsive Inhaltsblöcke (der klassische Dreispalter, etwa), haben wir separate Komponenten gebaut, in denen wir die Layout-Komponenten wiederverwenden.
- Die Layout-Logik liegt sauber getrennt innerhalb eigener Komponenten, statt verstreut durch verschiedene Komponenten hindurch.
- Dadurch lässt sich vorhersehbar das Spacing über die gesamte Webseite bestimmen und angleichen. Wir bekommen damit ein harmonischeres Layout und Design.
- Man benötigt keinerlei CSS-Kenntnisse, um mit den vorhandenen Layout-Komponenten ein responsives Layout zusammenzustecken. Man sollte vielleicht ein wenig Spaß an Puzzeln haben, falls das Layout etwas komplexer wird 😁
- Falls wir das Layouting für ältere Browser anpassen müssen (aktuell unterstützen wir sämtliche Evergreen-Browser), können wir das in den gekapselten Layout-Komponenten erledigen.
- Auf Seiten-Ebene (in Nuxt-Struktur gesprochen…) benötigen wir keinerlei CSS, sondern erreichen das Layouting komplett durch Komponenten
Nachteile
- Durch die separaten Layout-Komponenten wird teils etwas mehr Markup produziert. Gegebenenfalls könnte man sich in einigen Fällen ein paar DIV-Container sparen. Jedoch würde das auf Dauer wiederum zu Maintenance-Problemen führen, da sich Inkonsistenzen über die verschiedenen Komponenten hinweg "unkontrolliert" einschleichen.
Quellen und Inspiration
