Weniger Klassen machen HTML- und CSS-Dateien übersichtlich

Wer ein kleines Projekt mit CSS beginnt, legt häufig Klassen an, wie er sie gerade braucht. Da findet man dann in der CSS-Datei solche Konstrukte:

.h1rot {
color=#933
usw.
}

.h2rot {
color=#933
usw.
}

.prot{
color=#339
usw.
}

Und es werden immer mehr Klassen, die die HTML-Datei immer unübersichtlicher machen:

<div>

               <h1 class="h1rot">Überschrift 1</h1>

               <h2 class="h2rot">Überschrift 2</h2>

               <p class="prot">

                               Hier steht der Inhalt

               </p>

</div>

Dagegen kann man etwas tun. Mit einem gut geschriebenen CSS kann man sich viele Klassen sparen:

.rot p {
color=#933
usw.
}

.rot h1 {
color=#933
usw.
}

.rot h2 {
color=#933
usw.
}

In diesem Beispiel wird nur eine Klasse, nämlich rot, benutzt und die unterschiedlichen Kindelemente wie p, h1 oder h2 werden über ihre Elternelemente erreicht. Der HTML-Code sieht dann so wesentlich übersichtlicher aus:

<div class="rot">

               <h1>Überschrift 1</h1>

               <h2>Überschrift 2</h2>

               <p>

                               Hier steht der Inhalt

               </p>

</div>