CSS optimieren und vereinfachen

Vererbung, Inheritance, Cascading für die Optimierung von CSS

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

Die CSS-Kaskade zusammen mit der Vererbung (Ineritance) verringert 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 – Shorthands – 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; }

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-menu
10
Pseudo-Klasse
:hover, :visited
10
id-Selektor
#main-content
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