Component CSS als Architektur zur Webentwicklung
Ein Gastbeitrag der „Werbeagentur Kartinka“.
Aktuelle Webseiten und aufwendige Web-Applikationen werden immer umfangreicher und komplexer. Immer mehr Inhalte und Funktionalitäten gehen mit einer immer größer werdenden Architektur einher. Gleichzeitig steigt der Umfang an notwendigen CSS-Dateien, wobei die Übersichtlichkeit für Programmierer und Entwickler selbst bei einzelnen Webprojekten sehr schnell verloren gehen kann. Um etwaige Probleme zu vermeiden, lohnt es sich Component CSS oder kurz CCSS Architektur zu verwenden, mit deren Hilfe die CSS-Struktur von Webseiten oder Web-Anwendungen dauerhaft verbessert wird.
Als Orientierungspunkt und Basis für die Component CSS Architektur dient das etablierte Konzept der Web Components. Eine Parallele ergibt sich beispielsweise aus der Verwendung von HTML, um wiederverwendbare Widgets oder andere Komponenten zu entwickeln. Darüber hinaus sind die so entwickelten Elemente gekapselt und können dadurch jederzeit mit jedem anderen System kompatibel zusammenarbeiten. Durch die Kapselung entsteht zudem der Vorteil, dass Änderungen an Komponenten vorgenommen werden können und zwar ohne dass andere Elemente davon letztendlich mit betroffen sind. Diese Vorgehensweise, welche aus der komponentenbasierten Entwicklung stammt, soll nun entsprechend auf die CSS Architektur übertragen werden.
Die Grundprinzipien von Component CSS
Grundlegend richtet sich der Einsatz von Component CSS an bestimmten Grundprinzipien aus, welche verschiedene Vorteile mit sich bringen. Dabei ist zunächst einmal der komponentenbasierte Ansatz zu nennen. Dieser sorgt dafür, dass kleinere und voneinander unabhängige Komponenten in der Entwicklung entstehen, die dann wiederum an den unterschiedlichsten Stellen und sogar über verschiedene Projekte hinweg kompatibel eingesetzt werden können. Das Prinzip ist zudem eng mit der HTML-Struktur und Web-Components verknüpft, was die Arbeit für Programmierer zusätzlich vereinfacht.
Ein weiteres Grundprinzip beinhaltet die vollständige Isolierung der einzeln eingesetzten Komponenten, sodass sich diese letztendlich in keine Abhängigkeit zu anderen Komponenten begeben. Im Idealfall konzentrieren sich diese isolierten Elemente nur auf einen bestimmten Teilausschnitt des User-Interface. Durch die Isolierung wird letztendlich eine komplexe Verzahnung der Komponenten untereinander vermieden, wobei die Verwaltung der einzelnen CSS-Dateien gleichzeitig erleichtert wird.
Darüber hinaus verfolgt die Architektur das Ziel, so wenig Stylesheets wie nötig anzupassen, sondern im HTML-Code die Darstellung zu konfigurieren. Hierfür können je nach Möglichkeit bestimmte Klassen einfach eingefügt oder abgeändert werden. Um nun einen CSS-Code zu schreiben, welcher sich über mehrere Unterseiten wie erwartet verhält, sollten komplexe Selektoren oder generische Klassennamen vermieden werden.
Obgleich der Einsatz von Component CSS viele Vereinfachungen für die Wartbarkeit der CSS-Dateien mit sich bringt, ist es dennoch wichtig eine saubere Dokumentation ohne große Lücken bereitzustellen, welche auch die Funktion der eingesetzten Komponenten deutlich macht.
Die Elemente von CCSS im Überblick
Die Struktur der CSS-, SASS- oder auch Less-Dateien wird grundlegend durch die SMACSS-Architektur bestimmt und determiniert. SMACSS ist wiederum ein Akronym für „Scalable and Modular Architecture for CSS“. Diese Form der Architektur wurde von Jonathan Stock und seinem Team entwickelt. Die SMACSS-Architektur beinhaltet fünf unterschiedliche Kategorien, wobei jede verwendete CSS-Datei einer der Kategorien letztendlich zugeordnet werden kann.
- Base Rules – Durchführung von Resets und Stlying von Links und Input-Feldern
- Layout Rules – Beschreibung der Layout-Abschnitte welche Module enthalten
- Module Rules – Wiederverwendbare und modulare Teile des Designs
- State Rules – Beschreibung des Aussehens bestimmter Modulteile
- Theme Rules – Entsprechen den State Rules und beschreiben Layouts und Module
Die Auszeichnung der Klassen erfolgt dann nach dem Block-Element-Modifier-Muster. Dieses wurde von russischen Programmierern entwickelt und wird hier in der vereinfachten Form (Simplified BEM) verwendet. Für alle Base Klassen wird dabei beispielsweise das Präfix u- verwendet. Mit dem Klassenpräfix img- oder animate- werden zudem alle systemweiten Animationen und Bildelemente beschrieben. Die einzeln eingesetzten Komponenten werden dann mithilfe des BEM-Musters ComponentName-elementName-modifierName genutzt. Als Voraussetzung hierfür muss der Komponentenname immer mit einem Großbuchstaben beginnen. Weiterhin dürfen Komponentennamen keine Bindestriche beinhalten, die diese letztendlich für die Unterscheidung zwischen Element, Block oder Modifier verantwortlich sind.
Es lohnt sich also in vielerlei Hinsicht SASS zu verwenden, um die Entwicklung zu vereinfachen. Zudem kann die Architektur jederzeit auch mit LESS oder normalen Stylesheets umgesetzt werden.
Eine Beispielstruktur für CCSS
Wie bereits erwähnt erfolgt die Strukturierung von CCSS anhand der Vorgaben die von der SMACSS Architektur vorgegeben werden. In der nun folgenden Beispielstruktur finden wir ganz allgemein die Ordner css und ext, sowie diverse CSS- und SCSS-Dateien.
In unserem Beispiel nimmt nun der Ordner ext alle externen Bibliotheken auf. Dabei kann der Ordner durch seine Unabhängigkeit auch projektbezogene Dateien durch Tools wie Bower oder Gunt aktualisiert werden und zwar ohne dass dann eine Beeinflussung von anderen Elementen stattfindet.
Im Ordner css sind wiederum alle Projektdateien für die einzelnen Komponenten hinterlegt. Darüber hinaus lagern im base Ordner alle allgemeinen Daten, die letztendlich seitenübergreifend verfügbar sein müssen. An dieser Stelle wird beispielsweise die globale visuelle Darstellung von Links bestimmt oder auch Resets festgelegt. Die einzelnen und unabhängigen Komponenten werden zudem im Ordner components definiert. Diese kommen dann bei Suchformularen oder 404-Seiten zum Einsatz. Im Verzeichnis theme können in unserem Beispiel verschiedene Farbschemata für Anwendungen angelegt werden.
Die Sammlung aller Anweisungen aus den einzelnen SCSS-Dateien erfolgt in der main.css und den Befehl @import. Die Anweisungen landen schließlich nach Durchlauf des entsprechenden Grund-Tasks in der main.css oder der image.css.
Die Vorteile von Component CSS auf einen Blick
Der wichtigste Vorteil von CCSS ergibt sich aus der Übersichtlichkeit, welche auch bei großen Webprojekten und Webapps gewährleistet wird. Dadurch können Entwickler nicht nur die Komplexität reduzieren und die Wartung vereinfachen, sondern auch in fremde Projekte schneller einsteigen. So lassen sich mithilfe von Component CSS Problemstellungen in der Entwicklung vermeiden. Dafür ist jedoch nach wie vor ein gut dokumentierter und lückenfreier Code unerlässlich. Weiterhin wird die ungewollte Beeinflussung von Elementen reduziert und Verkettung von ungewünschten oder unbeabsichtigten Fehlern im Optimalfall abgewendet. Durch die Modularität können Komponenten idealerweise seitenübergreifend und sogar projektübergreifend zum Einsatz kommen. So vereint Component CSS mehrere Prinzipien und Vorteile, welche die Arbeit für Entwickler zukünftig vereinfacht.