30. Januar 2016
Webdesign-Tipps 10: CSS / multiple Klassen
Die Option, zur Gestaltung eines Elements auch mehrere CSS-Klassen verwenden zu können, erfreut sich leider keiner besonderen Bekanntheit. Dabei bietet diese, wie das folgende Beispiel zeigt, eine ideale Möglichkeit, eleganteren, kleineren und damit auch besser wartbaren Code zu schreiben.
Panikraum im Bundeskanzleramt
Zur Verdeutlichung ein Beispiel aus dem Leben. Stellen Sie sich ein Gebäude vor. Was hat ein Gebäude immer? In der Regel Wände, Türen, mehrere Fenster und ein Dach. In CSS sähe das so aus:
Gebäude { Wände; Türen; Fenster; Dach; }
Stellen wir uns weiter eine Jugendstilvilla und das (abgrundtiefe hässliche) Bundeskanzleramt in Berlin vor. Das sind beides Gebäude. Die Villa bietet sicherlich einen gewissen Luxus, beispielsweise ein Schwimmbad, eine Sauna und einen Fitnessraum.
Beim hässlichen Bundeskanzleramt sieht die Sache anders aus; damit sich der Kanzler bzw. die Kanzlerin vor Protestlern in Sicherheit bringen kann, wäre ein Panikraum und ein Hubschrauberlandeplatz für eine schnell Flucht sinnvoll.
Sie könnten diese Definitionen der zwei Gebäude in CSS nun natürlich wie folgt schreiben:
Villa { Wände; Türen; Fenster; Dach; Schwimmbad; Sauna; Fitnessraum; }
Bundeskanzleramt { Wände; Türen; Fenster; Dach; Panikraum; Hubschrauberlandeplatz; }
So machen das auch viele. Aber: die ersten vier Eigenschaften sind für beide Gebäudetypen gleich, bei Änderungen daran muss jede Klasse einzeln geändert werden. Viel einfacher und eleganter wäre diese Schreibweise:
Gebäude { Wände; Türen; Fenster; Dach; }
Gebäude.Villa { Schwimmbad; Sauna; Fitnessraum; }
Gebäude.Bundeskanzleramt { Panikraum; Hubschrauberlandeplatz; }
Die Gebäude der Typen „Villa“ und „Bundeskanzleramt“ erben also die Eigenschaften der Hauptklasse „Gebäude“, eine Änderung hier ändert alle verbundenen Klassen auf einen Schlag. Das Zusammenspiel der Klassen funktioniert dann, wenn diese später in HTML durch Leerzeichen getrennt aufgeführt werden, also zum Beispiel so:
class="Gebäude Villa"
class="Gebäude Bundeskanzleramt"
Praxis
Damit Sie sich eine Vorstellung der realen Schreibweise machen können, hier ein (vereinfachter) Auszug aus dem CSS-Code, den ich regelmäßig verwende. Ich definiere einen Linktyp „xxlink“ mit den Untertypen „xxlink.ext“ für externe Links und „xxlink.pdf“ für Links auf PDF-Dokumente.
a.xxlink:after { font-family:'FontAwesome'; }
a.xxlink.ext:after { content:"\f08e"; margin-left:8px; }
a.xxlink.pdf:after { content:"\f1c1"; margin-left:8px; }
Zeile 1 legt fest, dass die Schriftart für die :after-Pseudoelemente aller Links des Typs „xxlink“ der Webfont „FontAwesome“ sein soll. In Zeile 2 erfolgt die Definition für externe Links, in Zeile 3 für PDF-Dokumente, hier werden die jeweils passenden Zeichen als Unicode-Content angefügt.
In HTML binden wir die Klassen, um beispielsweise einen externen Link zu markieren, dann wiefolgt ein:
<a href="https://de.wikipedia.org/wiki/Bundeskanzleramt_(Berlin)" class="xxlink ext">Bundeskanzleramt (Berlin)</a>
Zu Beachten ist eigentlich nur, dass in HTML die Klassen durch Leerzeichen getrennt aufgeführt werden, während wir Klassen in CSS mit einen Punkt verbinden. Übrigens können Sie in dieser Logik beliebig viele Klassen verbinden, sofern das Sinn macht.
Bei großen Projekten ist dies Vorgehen, wenn man es einmal kapiert hat, eine segensreiche Maßnahme, um den Code wartbar zu halten. Ich hoffe daher, dass diese Ausgabe meiner Webdesign-Tipps nützlich war.
Nachtrag vom Januar 2020
Im Artikel „Aufklapptexte in Javascript mit multiplen CSS-Klassen“ werden multiple CSS-Klassen in der Praxis verwendet.