Eine Übersetzung des Artikels „Inheritance vs. Cascade“ von Tommy Olsson.

In diesem Artikel beschreibt er zwei wichtige Konzepte in CSS, deren Unterschiede man kennen sollte. Vererbung und Kaskaden, bekannter als Inheritance und Cascade.

Inheritance (Vererbung) und Cascade (Kaskaden oder Wasserfall) sind zwei der wichtigsten Aspekte von CSS. Trotzdem verwechseln sogar die besten unter den Webentwicklern diese beiden Konzepte.

Inheritance – Vererbung

Vererbung bedeutet, dass untergeordnete Elemente Eigenschaften ihrer Elternelemente erben. Nicht alle CSS-Eigenschaften werden vererbt, aber die meisten.

Um was gehts bei der Vererbung? Stellen wir uns vor, es gäbe in CSS keine Sache wie Vererbung und das wir folgendes HTML-Listing hätten:

<div id="sidebar">
  <p>Erster Absatz</p>
  <ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
  </ul>
  <p>Zweiter Absatz</p>
</div>

Lasst uns weiter annehmen, dass der Text auf der Sidebar eine unterschiedliche, kleinere Schriftgröße haben soll, als der Rest des Dokuments / der Website. Ohne Vererbung müssten wir die folgenden CSS Anweisungen schreiben:

#sidebar p, #sidebar li {
    font-family: Verdana, Arial, sans-serif;
    font-size: 80%;
}

Je mehr unterschiedliche Elementtypen unsere Sidebar besitzt, desto mehr Selektoren müssten wir hinzufügen. Aber dank des Vererbungsmechanismus, benötigen wir lediglich einen einzigen Selektor.

#sidebar {
    font-family: Verdana, Arial, sans-serif;
    font-size: 80%;
}

Die Schriftenfamilie und Schriftgrößen werden an alle untergeordneten Elemente des Elements mit id=“sidebar“, z.B. beide Textabsätze (<p>) und Listen sowie deren Elemente (<ul> und <li>), weiter vererbt.

Dank der Vererbung können wir Basiseigenschaften wie Schriftarten, Schriftgrößen und Farben bereits für das <body>-Element setzen, ohne diese für jedes Element im Dokument wiederholen zu müssen. Ganz wichtig: Hintergründe werden nicht vererbt, auch wenn es den Anschein hat. Denn wird für den <body> ein Hintergrundbild festgelegt, gilt das optisch zunächst auch für alle anderen Elemente. Diese haben aber tatsächlich, wenn kein Hintergrund für diese festgelegt wurde, automatisch den Wert transparent, also durchsichtig.

Wir haben sogar die Möglichkeit, Vererbung für Elemente zu bestimmen, denen CSS-Eigenschaften normalerweise nicht weiter vererbt werden. Das Schlüsselwort ist inherit.

Anmerkung: Die Vererbung in CSS ist das wichtigste Werkzeug, um schlanke Stylesheets zu schreiben.

Cascade – Kaskade

Cascade bedeutet, dass Eigenschaften mehrmals für ein einziges Element festgelegt werden können; entweder die gleiche Eigenschaft mit unterschiedlichen Werten oder verschiedene und zusätzliche Eigenschaften. Z.B. betrachten wir folgendes Markup:

<p id="x1" class="note">Text Text Text</p>

Wir können jetzt spezifische Eigenschaften festlegen oder globale Eigenschaften überschreiben. Z.B. mit folgendem CSS:

p {
    margin:0 0 1em;
    font-family:Verdana,Arial,sans-serif;
}

#x1 {
    margin-right:2em;
    margin-left:3em;
}

.note {
    color:#f00;
    font-weight:bold;
}

Ohne die Kaskade müssten wir alle Eigenschaften dieses spezifischen Absatzes (#x1) definieren:

#x1 {
    margin:0 2em 1em 3em;
    color:#f00;
    font-family:Verdana,Arial,sans-serif;
    font-weight:bold;
}

Den Mechanismus, der bestimmt welche Eigenschaften angewendet werden, wenn mehrere Regeln in Konflikt geraten, nennt man specificity (Spezifizität). Es gibt eine Reihe von Regeln in CSS, die genau definieren wie eindeutig festgelegt wird, welche Formatierungen zur Anwendung kommen.

Anmerkung: Diese Spezifizität wird nach bestimmten Kriterien berechnet. Hier nachzulesen.

Ein weitere Einsatzmöglichkeit für das Kaskaden-Konzept besteht darin, Definitionen in mehrere Bereiche zu zerlegen. So ist es beispielsweise möglich, ein Basis-Stylesheet anzulegen und einige seiner Definitionen zu ersetzen oder neue hinzuzufügen. So z.B. in speziellen Stylesheets, die nur für einzelne wenige Seiten verwendet werden.

Credits

Mit freundlicher Genehmigung von Tommy Olsson

Englischer Originalartikel: „Inheritance vs. Cascade“