Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Gastautor 28. Mai 2019

CSS: So benennst du Klassen sinnvoll

Klar ist es klasse, dass du Klassen in CSS frei benennen kannst. Aber mit großer Macht kommt große Verantwortung, um es mal mit Stan Lee zu sagen. Benennst du Klassen nun also so, dass du es klasse findest, könnte es sein, dass du die Klassen alsbald doch nicht mehr so klasse finden kannst. Klar soweit?

Denn das grundlegende Prinzip der Anwendung von Stylesheets wird bisweilen falsch verstanden. Damit ist nicht die Definition der Klassen gemeint, sondern deren Benennung.

Sehen wir uns einen Auszug einer typischen CSS-Datei an:

h1.blau {
   font-size: 18px;
   color:blue;
}
h1.rot {
   font-size:18px;
   color:red;
} 

Hier werden zwei Varianten eines H1-Tags definiert. Die dazugehörige HTML-Datei könnte jetzt so aussehen:

<h1 class="blau">Erste Überschrift</h1>
<h1 class="rot">Noch eine Überschrift</h1> 

Fast alles in Ordnung, aber auch nur fast. Was passiert wenn der verantwortliche Designer dir sagt, dass die blauen Überschriften jetzt in Schwarz dargestellt werden sollen? Eigentlich ganz einfach: Du änderst einfach im Stylesheet die entsprechende Angabe wie folgt:

h1.blau {
   font-size:18px;
   color:black;
} 

Diese Änderung genügt, damit alle Überschriften die Anfangs noch blau waren, nun schwarz dargestellt werden. Alle sind glücklich, nur du wahrscheinlich nicht. Denn die Bezeichnung der ersten H1-Klasse ist immer noch h1.blau. Du müsstest, eigentlich solltest, aber an und für sich schon müsstest, im Stylesheet und in allen HTML-Dateien die Bezeichnung ändern. Gerade bei vielen HTML-Dateien eine mühselige Angelegenheit und auch nicht im Sinne der Benutzung von Stylesheets, die ja schließlich Arbeit sparen sollen.

Was kann man also tun? Benenne die Klassen nicht nach ihrer Formatierung, sondern nach deren Sinn. Hier einige Beispiel für die richtige Anwendung:

h1.first {
   font-size:18px;
   color:blue;
}
h1.foo {
   font-size:18px;
   color:red;
}
span.important {
   font-weight: bold;
}
span.unimportant {
   font-size: 14px;
}
a.nolink {
   text-decoration:none;
} 

Somit können die Stylesheets in Zukunft geändert werden, ohne dass die HTML-Dateien angefasst werden müssten.

von Marc Teuber

(Beitragsbild: Depositphotos)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.