Component CSS oder kurz CCSS ist eine Architektur, mit deren Hilfe die CSS-Struktur von Webseiten oder Web-Apps verbessert werden kann. Da diese meist sehr viele CSS-Dateien besitzen, kann die Wartung oder Erweiterung bestehender Komponenten mitunter sehr unübersichtlich werden. Arbeiten viele verschiedene Entwickler gleichzeitig an einem Projekt kann der Code durch die individuellen Eigenheiten des Programmierers für andere durchaus verwirrend werden.
Die Architektur nimmt sich ein Beispiel am bereits bestehenden Konzept der Web Components, bei denen mit Hilfe von HTML wiederverwendbare Komponenten oder Widgets entwickelt werden. Diese sind gekapselt, besitzen aber die Fähigkeit, mit anderen Systemen zusammenzuarbeiten. Durch die Kapselung können Änderungen an der Komponente durchgeführt werden, ohne andere Elemente zu beeinflussen.
Diese Technik aus der komponentenbasierten Entwicklung soll nun auch auf CSS übertragen werden. Dafür werden verschieden Techniken und Elemente benutzt.
Prinzipien
Mit dem Einsatz von Component CSS werden verschiedene Prinzipien verfolgt.
Zum einen soll mit dem komponentenbasierten Ansatz erreicht werden, dass kleine und unabhängige Komponenten entstehen, die an verschiedenen Stellen oder sogar in verschiedenen Projekten genutzt werden können. Dieses Prinzip ist eng verbunden mit der HTML-Struktur und Web Components.
Zum anderen müssen die einzelnen Komponenten vollständig isoliert sein und dürfen nicht von anderen Komponenten abhängig sein. Idealerweise fokussieren sie sich deshalb nur auf einen bestimmten Teil des User Interface. Eine Verzahnung mit anderen Komponenten würde zu einer schwereren Verwaltung der einzelnen CSS-Dateien führen.
Ein weiteres Ziel ist es, so wenig CSS wie möglich anpassen zu müssen, sondern die Darstellung im HTML-Code anzupassen. Dafür sollen nach Möglichkeit einfach nur bestimmte Klassen eingefügt oder geändert werden.
Um einen CSS-Code zu schreiben, der sich verhält, wie man es erwartet, auch über viele Unterseiten hinweg, sollten komplizierte Selektoren oder generische Klassennamen vermieden werden.
Trotz der, durch diese Technik, vereinfachten Wartbarkeit der CSS-Dateien, ist es notwendig, eine lückenlose und saubere Dokumentation bereitzustellen, die die Funktion der jeweiligen Komponente deutlich macht.
Elemente in Component CSS
Für die Struktur der einzelnen CSS-, SASS- oder Less-Dateien wird die SMASS-Architektur (Scalable and Modular Architecture for CSS) verwendet. Die Architektur wurde von Jonathan Snook entwickelt und beinhaltet fünf Kategorien, in die die entsprechenden CSS-Dateien eingeordnet werden:
– Base Rules: hier können Resets vorgenommen, sowie allgemeine Elemente wie Links oder Input-Felder gestylt werden
– Layout Rules: beschreiben die einzelnen Layout-Abschnitte (Sections), welche einzelne Module enthalten
– Module Rules: sind wiederverwendbare und modular Teile des Designs
– State Rules: beschreiben, wie Module in einem bestimmten Zustand aussehen
– Theme Rules: entsprechen den State Rules, beschreiben neben Modulen aber auch Layouts
Die Klassen werden nach dem Block-Element-Modifier-Muster, kurz BEM, ausgezeichnet, welches von Programmierern der russischen Suchmaschine Yandex entwickelt wurde. Diese wird in einer vereinfachten Form, dem Simplified BEM, genutzt. Für Base-Klassen wird das Präfix u- genutzt. Alle systemweiten Bilder oder Animationen werden mit den Klassenpräfixen img- oder animate- beschrieben. Für die einzelnen Komponenten wird das BEM-Muster mit ComponentName-elementName—modifierName genutzt, wobei der Komponentenname mit einem Großbuchstaben beginnen muss. Komponentennamen dürfen weiterhin keine Bindestriche enthalten, da diese für die Unterscheidung zwischen Block, Element und Modifier dienen.
Zur Vereinfachung der Entwicklung kann SASS verwendet werden. Aber auch mit LESS oder normalem CSS kann die Architektur verwendet werden.
Beispielstruktur
Die Struktur von CCSS wird nach bestimmten Vorgaben von SMACSS bereitgestellt. Im Beispiel finden wir die Ordner css und ext, sowie diverse CSS- und SCSS- Dateien.
Der Ordner ext nimmt externe Bibliotheken auf. Durch seine Unabhängigkeit von den anderen, projektabhängigen Dateien kann er durch Tools wie Bower oder Grunt aktualisiert werden, ohne dass andere Elemente eine Beeinflussung erfahren.
Der Ordner css beinhaltet dagegen die Projektdateien für die einzelnen Komponenten. Im Ordner base lagern allgemeine Dateien, die seitenübergreifend zur Verfügung stehen sollen. So wird hier beispielsweise global das Aussehen von Links definiert oder resets festgelegt. Im Ordner components werden dann die einzelnen, unabhängigen Komponenten definiert, wie zum Beispiel für ein Suchformular oder die 404-Seite. Im Verzeichnis theme können zum Beispiel verschiedene Farbschemata für Apps angelegt werden.
Alle Anweisung aus den einzelnen, hier SCSS-Dateien, werden in der main.css über einen @import-Befehl gesammelt.
Alle CSS-Anweisung landen final, nach dem Durchlauf des entsprechenden Grunt-Tasks, in der main.css oder der images.css.
