Geschrieben von Christian Schnettelker

Schlagwörter:

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:

Gebäude { Wände; Türen; Fenster; Dach; }

Stellen wir uns weiter eine Jugendstilvilla am Bochumer Bergbaumuseum und das Bundeskanzleramt in Berlin vor. Das sind beides Gebäude, die abgrundtiefe architektonische Hässlichkeit des Bundeskanzleramtes gegenüber einer gepflegten Jugendstilvilla lassen wir hier einmal außen vor.

Die Villa bietet sicherlich einen gewissen Luxus, beispielsweise ein Schwimmbad, eine Sauna und einen Fitnessraum.

Im Bundeskanzleramt sieht die Sache anders aus; damit sich der Kanzler bzw. die Kanzlerin vor wütenden Bürgern in Sicherheit bringen kann wäre – gerade in diesen Zeiten – ein Panikraum und ein Hubschrauberlandeplatz für eine schnell Flucht sinnvoll.

Sie könnten diese Definitionen 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 WebfontFontAwesome“ 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.

Kommentare

Kommentare

  1. Marc Meierhof schrieb:

    Mal ganz ehrlich, man sagt ja immer, man sieht den Wald vor lauter Bäumen nicht. Und so geht es mir in diesem Fall scheinbar auch… Ich habe nicht daran gedacht, die externen Links direkt mit einer speziellen class zu versehen. Vielen Dank für den kleinen, aber sehr hilfreichen Hinweis. ;)

  2. Webdesign schrieb:

    Wirklich vertrauenswürdig Blog. Bitte halten mit großer Beiträge wie diese zu aktualisieren. Ich habe markiert Ihre Website gebucht und bin darüber ein paar Freunde von mir per E-Mail, die ich kenne würde viel Spaß beim Lesen.
    Web-Design spielt eine wichtige Rolle Benutzerfreundlichkeit zu verbessern. Gutes Design ist derjenige, der die Inhalte ergänzt. Es ist wichtig, um sicherzustellen, dass ein Besucher so lange wie möglich auf der Seite bleibt. Machen Sie eine einfache und bequeme Navigation.

    • Dieser „Kommentar“ (URLs und Email-Adresse wurden entfernt) zeigt dem Außenstehenden sehr schön, was in den Blogs tagein tagaus für ein SEO-Müll ankommt.

      Inzwischen sind wir aber noch einen Schritt weiter; offenbar hat man das Kommentarschreiben ins billigere Ausland verlegt. Dort sitzen Leute vor den Rechnern, die der Deutschen Sprache erst gar nicht mächtig sind und irgendwelche Belanglosigkeiten mit translate.google.com „übersetzen“. Das Produkt ihrer Bemühungen wird dann munter und ohne weiteres Nachdenken als „Blog-Kommentar“ abgeschickt.

      Obiges, komplett sinnfreies Kauderwelsch ist das Ergebnis. Diese modernen Kommentarspammer meinen ernsthaft, so ein Mist würde freigeschaltet und ein kostenfreier Link sowie eine kostenfreie Werbung für die eigene Webdesign-Firma würde entstehen. Au weia… oder, wie der Lateiner sagt: „O tempora, o mores!“

  3. Web Designer schrieb:

    Sehr guter Artikel, ist immer wieder schön, wenn man neue Sachen über CSS lernen kann.
    Danke!

  4. Dennis schrieb:

    Hey,
    schöner Artikel!

    Das ist ein schöner Tipp, welcher auch verständlich und gut beschrieben wurde. :)

    LG
    Dennis

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.