Stil mit {stil}

Nov 2008

CSS vereinfachen: Kurzschriften, Gruppierung, Vererbung

Die CSS-Regeln für eine komplexe Site geraten schnell lang und unübersichtlich. Zur besseren Lesbarkeit und zur Verkürzung bietet CSS Kurzschriften, die mehrere Regeln für ein HTML-Element zusammenfassen – die bekannteste Abkürzung ist font, in der Schrifttyp, Schriftgröße, Schriftschnitt und die Zeilenhöhe in einer CSS-Regel notiert werden. Gleiche Regeln für unterschiedliche HTML-Elemente lassen sich gruppieren.

Zu den komplexeren Techniken, die das Stylesheet vereinfachen sollen, gehört die Vererbung.

Eigenschaften für die Schriftgestaltung in Kurzschrift

Kurzschriften helfen, das Stylesheet übersichtlich zu halten und vermeiden Fehler.

p { font-family: Verdana, Arial, sans-serif; 
    font-weight: italic; 
    line-height: 16px; 
    font-size: 12px; 
    color: gray; 
}

p { font: italic 12px/16px Verdana, Arial, sans-serif; color: gray; }

Erforderlich sind Schriftgröße/Zeilenabstand in exakt dieser Form mit dem Schrägstrich. Der Zeilenabstand muss immer angegeben werden. Die Angabe italic oder bold ist optional. Die Kurzschrift für die Schrift enthält nicht die Schriftfarbe.

Regeln gruppieren

Ebenfalls besser lesbarer sind Regelgruppen. Zudem helfen Gruppen bei der Organisation des Stylesheets und halten Eigenschaften konsistent.

h1, h2, h3 { border-bottom: 2px solid gray; }
p, ul, ol { font-family: Georgia, Times, "Times New Roman", serif; }

Mehrere Klassen zur Modularisierung einsetzen

Damit CSS-Eigenschaften nicht in vielen Regeln wiederholt werden müssen, lassen sich mehrere Klassen in ein class-Attribut schreiben.

.withBackground { background: green; color: white; }
.textSize       { font-size: 1.1em; line-height: 150%; }

<h2 class="withBackground">Lorem Ipsum</h2>
<p class="withBackground textSize">Lorem Ipsum</p>

Automatik: Vererbung

Soweit bleiben die Regeln einfach und intuitiv. Die Vererbung bringt zusätzliche Automatismen ein, um den Schreibaufwand gering zu und die Darstellung des Dokuments konsistent zu halten.

Einige Eigenschaften können an Nachfahren vererbt werden. So erben z.B. p- und h1, … h6 Elemente die Vereinbarung der Schriftart vom umfassenden body-Element, hingegen wird die Eigenschaft background-color nicht vererbt.

body { font-family: Verdana, Arial, Helvetica, sans-serif; background: silver; }

führt dazu, dass die meisten Block-Elemente und damit die darin liegen Inline-Elemente Schriftart und Vordergrundfarbe vom body-Element erben. Die Hintergrundfarbe wird nicht vererbt – sie scheint sozusagen nur durch die transparenten Kindelemente durch. Auf einige wenige Elemente, die schon im reinen HTML besondere Eigenschaften für die Darstellung haben wie z.B. das pre-Element, wirken die die vererbten Eigenschaften nicht.

Vererbt werden Eigenschaften wie Schriftart und Schriftfarbe, bei der Schriftgröße sieht es allerdings schon anders aus.