Mehrere CSS-Klassen in einem HTML-Element

Manchem ist vielleicht irgendwann mal aufgefallen, dass in HTML-Elementen mehrere Klassennamen geschrieben waren und wusste damit nicht recht was anzufangen.  Viele Profis wird das jetzt nicht mehr interessieren, die kennen das schon, aber mancher eben nicht.
So sieht es zum Beispiel in einem HTML-Element aus: class=“menu vertical_menu special_menu“

Joomla und Typo3 tun sich da besonders hervor, mehrere Klassennamen in ein Element zu packen.
Warum?
Das erleichtert erheblich die Formatierung bei komplexen Templates/Vorlagen und ist für größere CMS typisch.
Eigentlich ist es ganz einfach erklärt:

Mit class=“menu vertical_menu special_menu“ erhalte ich drei CSS-Klassen und kann folgendes tun:

.menu Damit formatiere ich sämtliche Menüs die in dem Internet-Projekt vorkommen, mag sein es ist die Schriftfarbe oder Größe oder Hintergrundfarbe oder…
Jedes HTML-Element in dem menu vorkommt, wird dadurch angesprochen. Falls ich die Klassen in einem Listenelement <li> oder <ul> stehen habe, kann ich auch den Anker <a> der in der Liste steht, ansprechen und gestalten. Beispiel: .menu a {…}

.vertical-menu sagt mir dank der Namesgebung, dass ich es hier vermutlich mit einem vertikal ausgerichteten Menü zu tun habe. Hier setze ich sinnvollerweise die Formatierung für ein vertikale Anordnung rein. Das betrifft dann nur die vertikalen Menüs und nicht horizontale, da ich von allen Menüs nur diese Klasse anspreche. Als Beispiel könnte ich hier padding-top und padding-bottom angeben damit mehr Luft zwischen den Links ist. Oder analog dazu in einem .horizontal-menu würde ich vielleicht display:inline angeben, damit Listenelemente sich hintereinander anordnen und nicht untereinander.
Ich picke mir also mit dem zweiten Klassennamen einen Teil der Menüs heraus und muss lediglich das formatieren, was anders sein soll als in der Klasse .menu schon angegeben wurde.

.special-menu ist sicher eine Spezifizierung eines Menüs, das kann sinnvoll sein, wenn ein Menü oder Teile davon von den anderen abweichen oder besonders hervorgehoben werden sollen. Wenn ich hier Formatierungen eintrage, bleiben alle anderen Menüs davon unberührt, aber die Formatierung von .menu und/oder .vertical-menu wirkt auch hier, sofern sie nicht überschrieben wird. Angenommen ich ändere für .special-menu nur die Hintergrundfarbe und den Hover, dann muss ich nicht sämtliche Formatierung von .menu und .vertical-menu auch noch schreiben.

Ohne mehreren CSS-Klassen in einem Element würde ein CSS für Systeme wie Joomla unbeherrschbar werden, man bräuchte für jede Eventualität eigene Formatierungen und hätte viele Seiten lange CSS-Scripte ohne Ende.
Es erleichtert einem bei klugem Einsatz auch die Arbeit, denn angenommen ich wollte in allen Menüs die Schriftfarbe ändern, so müsste ich es lediglich einmal in der Klasse .menu angeben.

Voraussetzung ist allerdings, dass man sich zuvor Gedanken über die Struktur und die Klassennamen macht und auch die Reihenfolge im CSS-Script beachtet, .menu sollte logischerweise dann vor oder über .vertical-menu stehen. Das Generelle zuerst und das Spezielle danach.

Dieser Eintrag wurde veröffentlicht in HTML und CSS und getaggt , . Lesezeichen für den Permalink.
Jeder Kommentar wird überprüft.

Schreibe einen Kommentar