CSS, HTML und Javascript mit {stil}

CSS optimieren

CSS Vererbung, Kaskade und Gruppieren: Vereinfachen und optimieren

CSS Vererbung, Kaskade, Kurzschrift und Gruppierung halten die CSS-Datei kurz und übersichtlich. Diese Konzepte optimieren CSS, sind allerdings alles andere als intuitiv.

Vererbung und die CSS-Kaskade verringern die Schreibarbeit. CSS Kurzformen (shorthands) helfen, das Stylesheet übersichtlich zu halten und vermeiden Fehler.

CSS-Regeln für eine komplexe Webseite werden schnell lang und unübersichtlich. CSS unterstützt Kurzschreibweisen und weist mehreren Elementen gleichzeitig Eigenschaften zu, damit das Stylesheet kurz und besser lesbar bleibt.

CSS Kurzschrift

Die bekannteste CSS-Kurzform ist font, in der Schrifttyp, Schriftgröße, Schriftschnitt und Zeilenhöhe in einer CSS-Regel notiert werden.

p { font-family: Verdana, Arial, sans-serif; 
    font-weight: italic;
    line-height: 16px;
    font-size: 12px;
    color: gray
}
+--- CSS-Selektor
|
p { font: italic 12px/16px Verdana, Arial, sans-serif; color: gray; }
      |      |    |     |     |       |         |            
      |      |    |     |     |       |         +--- generelle Schriftart
      |      |    |     |     |       |
      |      |    |     |     |       +--- Alternative Schriftfamilie
      |      |    |     |     | 
      |      |    |     |     +--- Bevorzugte Schrift für die Webseite
      |      |    |     |     |
      |      |    |     +--- Zeilenhöhe
      |      |    |
      |      |    +--- Schriftgröße
      |      |
      |      +--- Schriftstil oder Schriftgewicht (bold, italic, normal)
      |
      +--- Kurzschrift für font-family, font-weight, font-style … 

Die Kurzschrift für die Eigenschaften font-family, font-weight, font-size … ist langatmig – aber doch übersichtlicher als das Niederschreiben aller einzelnen Eigenschaften für die Schrift auf der Webseite. 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 font setzt aber nicht die Schriftfarbe.

CSS-Regeln gruppieren

Regelgruppen fassen Selektoren zusammen, für die gemeinsame Eigenschaften gelten. Im Beispiel oben sollen Überschriften h1, h2 und h3 jeweils einen Rahmen unten zeigen. Im zweiten Beispiel gilt die Schriftfamilie für das p-Elemente genauso wie für ul- und ol-Elemente.

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

CSS Regelgruppen halten das Stylesheet ebenfalls kurz, helfen bei der Organisation des Stylesheets und halten Eigenschaften konsistent – kurz: Sie optimieren das CSS.

Mehrere CSS-Klassen

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

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

<h2 class="green">Lorem Ipsum</h2>
<p class="green large">Lorem Ipsum</p>

Wenn mehr als eine CSS class für ein Element vorhanden ist, können wir auf Elemente zugreifen, die gleichzeitig in zwei oder mehr CSS Klassen enthalten sind.

Die Klassen werden ohne Leerzeichen aneinander gehangen.

.green.large { background-color: ivory; font-size: 1.2em; }

CSS IMPORTANT

Damit sich eine Eigenschaft entgegen allen vorangegangenen Regeln durchsetzt, wird sie als !important notiert.

aside li a { color: green !important; }

CSS Inherit – Vererbung

Soweit bleiben die Regeln einfach und intuitiv. CSS Inheritance – das Vererben von CSS-Eigenschaften – bringt Automatismen ein, um den Schreibaufwand gering und die Darstellung des Dokuments konsistent zu halten.

h1divbodyheadernavdivdivpdivaa

Einige Eigenschaften können an Nachfahren vererbt werden. So erben z.B. alle Elemente die Schrift vom body-Element. Hingegen wird background-color nicht vererbt.

body { 
    font-family: Georgia, serif; 
    color: rgb(40,40,40); 
    background-color: silver; }

führt dazu, dass Elemente Schrift 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 (z.B. das pre-Element), wirken die die vererbten Eigenschaften nicht.

Vererbt werden Eigenschaften wie font-family und color, bei der font-size sieht es allerdings schon anders aus.

Vererbung ist zwar intuitiv, aber man braucht ein gutes Gedächtnis, um sich zu merken, wo Inherit gilt und wo nicht.

Gewicht von CSS-Regeln

Jede CSS-Regel hat ein spezifisches Gewicht und kann wichtiger sein als andere Regeln oder durch andere Regeln überschrieben werden. Wenn zwei Regeln dasselbe Gewicht haben, setzt sich die zuletzt notierte Regel durch.

Die einfachste Methode, das Gewicht einer Regel zu berechnen

einfacher Selektor
p, h1, td
1
Klassen-Selektor
.nav
10
Pseudo-Klasse
:hover, :visited
10
id-Selektor
#main
100
inline-CSS
style="color:red"
1000

Das W3C hat eine weitere Methode auf Lager.

  1. a = 1 für inline-CSS
  2. b = Anzahl der ids
  3. c = Zahl der Attribut-Selektoren, Klassen und Pseudo-Klassen
  4. d = Zahl der Element- und Pseudo-Element-Namen der Regel
#nav input:not([type="number"])
a=0, b=1, c=1, d=1 -> 0011

content nav li:last-child
a=0, b=0, c=1, d=3 -> 0013

<p style="color:red">
a=1, b=0, c=0, d=0 -> 1000