Das „C“ in CSS: Die Kaskade

Aufbauend auf Geoff's Einführungsartikel über Das zweite „S“ in CSS, wollen wir nun das „C“ in CSS beleuchten – was wir die Kaskade nennen. Hier wird es langsam unübersichtlich und manchmal sogar verwirrend.

Haben Sie jemals eine CSS-Eigenschaft geschrieben, und der Wert scheint nicht zu funktionieren? Mussten Sie vielleicht auf !important zurückgreifen, um sie zum Laufen zu bringen? Oder haben Sie sich damit beholfen, das CSS inline im HTML-File auf dem Element zu schreiben?

<div style="background:orange; height:100px; width:100px;">
  Ack, inline!
</div>

Apropos Inline-Styles: Haben Sie sich jemals gefragt, warum SVG-Editoren diese anstelle einer separaten CSS-Datei verwenden? Das erscheint irgendwie seltsam, oder?

<svg id="icon-logo-star" viewBox="0 0 362.62 388.52" width="100%" height="100%">
  <style>
    .logo {
      fill: #ff9800;
    }
  </style>
  <title>CSS Tricks Logo</title>
  <path class="logo" d="M156.58 239l-88.3 64.75c-10.59 7.06-18.84 11.77-29.43 11.77-21.19 0-38.85-18.84-38.85-40 0-17.69 14.13-30.64 27.08-36.52l103.6-44.74-103.6-45.92C13 142.46 0 129.51 0 111.85 0 90.66 18.84 73 40 73c10.6 0 17.66 3.53 28.25 11.77l88.3 64.75-11.74-104.78C141.28 20 157.76 0 181.31 0s40 18.84 36.5 43.56L206 149.52l88.3-64.75C304.93 76.53 313.17 73 323.77 73a39.2 39.2 0 0 1 38.85 38.85c0 18.84-12.95 30.61-27.08 36.5l-103.61 45.91L335.54 239c14.13 5.88 27.08 18.83 27.08 37.67 0 21.19-18.84 38.85-40 38.85-9.42 0-17.66-4.71-28.26-11.77L206 239l11.77 104.78c3.53 24.72-12.95 44.74-36.5 44.74s-40-18.84-36.5-43.56z"></path>
</svg>

Nun, die Kaskade hat viel damit zu tun. Lesen Sie weiter, um herauszufinden, wie sich Styling-Methoden darauf auswirken, was auf Ihre Elemente angewendet wird, und wie Sie die Kaskade zu Ihrem Vorteil nutzen können, denn glauben Sie mir, es ist eine wundervolle Sache, wenn man sie erst einmal verstanden hat.

TL;DR: Springen Sie direkt zum CSS-Ordnungsdiagramm für eine visuelle Darstellung, wie alles funktioniert.

Die Kaskade berücksichtigt, wie und wo Stile geschrieben werden

Es gibt unzählige Möglichkeiten, CSS-Regeln auf ein Element anzuwenden. Unten sehen Sie ein Beispiel, wie stroke: red; auf dasselbe Element angewendet werden kann. Die Beispiele sind nach aufsteigender Priorität geordnet, wobei die höchste Priorität unten steht

<!-- Inheritance -->
<g style="stroke: red">
  <rect x="1" y="1" width="10" height="10" /> <!-- inherits stroke: red -->
</g>

<!-- Inline attributes -->
<rect x="1" y="1" width="10" height="10" stroke="red" />

<!-- External style sheet -->
<link rel="stylesheet" href="/path/to/stylesheet.css">

<!-- Embedded styles -->
<style>
  rect { stroke: red; }
</style>

<!-- Different specificity or selectors -->
rect { stroke: red; }
.myClass { stroke: red; }
#myID { stroke: red; }

<!-- Inline style -->
<g style="stroke: red"></g>

<!-- Important keyword -->
<g style="stroke: red !important"></g>

Vererbung? Eingebettet? Extern? Inline? Spezifität? Wichtig? Ja, viele Begriffe werden herumgeworfen. Lassen Sie uns diese ein wenig aufschlüsseln, denn jeder einzelne bestimmt, was der Browser letztendlich verwendet, wenn eine Webseite geladen wird.

Elemente können Stile von anderen Elementen erben

Sowohl HTML- als auch SVG-Elemente können CSS-Regeln erben, die auf andere Elemente angewendet werden. Dies nennen wir eine Eltern-Kind-Beziehung, wobei das Element, auf das die CSS angewendet wird, das Elternteil ist und das im Elternteil enthaltene Element das Kind ist.

<div class="parent">
  <div class="child">I'm the child because the parent is wrapped around me.</div>
</div>

Wenn wir die Textfarbe des Elternteils festlegen und für das Kind keine Textfarbe deklarieren, dann schaut das Kind zum Elternteil, um zu wissen, welche Farbe sein Text haben soll. Das nennen wir Vererbung und es ist ein Paradebeispiel dafür, wie ein Stil zu einem übereinstimmenden Element kaskadiert ... oder die Kette zum nächsten übereinstimmenden Stil "hochblubbert".

Die Vererbung hat jedoch die niedrigste Priorität unter den Styling-Methoden. Anders ausgedrückt, wenn ein Kind eine Regel hat, die spezifisch für es ist, dann wird der vererbte Wert ignoriert, auch wenn der vererbte Wert ein wichtiges Schlüsselwort haben mag. Das Folgende ist ein Beispiel

<div class="parent" style="color: red !important;">
  <div class="child">I'm the child because the parent is wrapped around me.</div>
</div>

Siehe den Pen Child ignores inline inheritance with !important von Geoff Graham (@geoffgraham) auf CodePen.

SVG Inline-Attribute

Für SVG-Elemente können wir Stile auch über Inline-Attribute anwenden, die die zweitniedrigste Priorität in der Kaskade haben. Das bedeutet, dass die CSS-Regeln in einer Stylesheet sie überschreiben können.

<rect x="1" y="1" width="10" height="10" stroke="red" />

rect {
  stroke: blue;
}

Siehe den Pen Stylesheet overrides SVG inline attributes von Geoff Graham (@geoffgraham) auf CodePen.

Die meisten SVG-Editoren verwenden Inline-Attribute für die Portabilität; das heißt, die Möglichkeit, einige Elemente zu kopieren und woanders einzufügen, ohne die Attribute zu verlieren. Benutzer können dann das resultierende SVG verwenden und seine Elemente mit einer externen Stylesheet stylen.

Stylesheets

Stylesheets sind in zwei Ausprägungen unterteilt: extern und eingebettet

<!-- External style sheet -->
<link rel="stylesheet" href="/path/to/stylesheet.css">

<!-- Embedded styles -->
<style>
  div { border: 1px solid red }
</style>

Eingebettete Stile haben die gleiche Priorität wie externe Stylesheets. Daher gilt, wenn Sie die gleichen CSS-Regeln haben, die Reihenfolgeregeln.

Siehe den Pen Embedded styles override stylesheet rules von Geoff Graham (@geoffgraham) auf CodePen.

Alle Stylesheets folgen Reihenfolgeregeln, wobei später definierte Dateien eine höhere Priorität haben als früher definierte. In diesem Beispiel hat stylesheet-2.css Vorrang vor der Datei stylesheet-1.css, da sie zuletzt definiert wurde.

<link rel="stylesheet" href="/path/to/stylesheet-1.css">
<link rel="stylesheet" href="/path/to/stylesheet-2.css">

Spezifität oder Selektoren

Wie Sie Ihre Elemente auswählen, bestimmt auch, welche Regeln angewendet werden, wobei Tags (z. B. <p>, <div>), Klassen (z. B. .my-class) und IDs (z. B. #myI-id) aufsteigende Prioritäten haben.

Siehe den Pen Specificity by selectors von Geoff Graham (@geoffgraham) auf CodePen.

Im obigen Beispiel, wenn Sie ein Div-Element mit sowohl .my-class als auch #my-id haben, wird der Rand rot sein, weil IDs eine höhere Priorität als Klassen und Tags haben.

*Die Spezifität hat eine höhere Priorität als Reihenfolgeregeln, daher hat die Spezifität unabhängig davon, ob Ihre Regel oben oder unten steht, immer noch eine höhere Priorität und wird angewendet.

Reihenfolge

CSS-Regeln priorisieren immer von links nach rechts und dann von oben nach unten.

<!-- Blue will be applied because it is on the right -->
<div style="border: 1px solid red; border: 1px solid blue;"></div> 

<style>
  div {
    border: 1px solid red;
    border: 1px solid blue; /* This will be applied because it is at the bottom */
  }
</style>

Inline-Styles

Inline-Stile haben die zweithöchste Priorität, direkt unter dem Schlüsselwort !important. Das bedeutet, dass Inline-Stile nur durch das wichtige Schlüsselwort und nichts anderes überschrieben werden. Innerhalb von Inline-Stilen gelten normale Reihenfolgeregeln, von links nach rechts und von oben nach unten.

<div style="1px solid red;"></div>

Das wichtigste Schlüsselwort

Apropos das Schlüsselwort !important: Es wird verwendet, um Reihenfolge-, Spezifitäts- und Inline-Regeln zu überschreiben. Mit anderen Worten, es hat unglaubliche Kräfte.

Überschreiben von Inline-Regeln

<style>
  div {
    /* This beats inline styling */
    border: 1px solid orange !important;
    /* These do not */
    height: 200px;
    width: 200px;
  }
</style>

<div style="border: 1px solid red; height: 100px; width: 100px;"></div>

Im obigen Beispiel würde das Div ohne das wichtige Schlüsselwort einen roten Rand haben, da Inline-Styling eine höhere Priorität als eingebettete Stile hat. Aber mit dem wichtigen Schlüsselwort wird der Div-Rand orange, da das wichtige Schlüsselwort eine höhere Priorität als Inline-Styling hat.

Die Verwendung von !important kann sehr nützlich sein, sollte aber mit Vorsicht eingesetzt werden. Chris hat einige Gedanken dazu, in welchen Situationen es sinnvoll ist, es zu verwenden.

Überschreiben von Spezifitätsregeln

Ohne das wichtige Schlüsselwort hätte dieser Div-Rand blau, weil Klassen eine höhere Priorität als Tags in der Spezifität haben.

<style>
  /* Classes have higher priority than tags */
  .my-class {
    border: 1px solid blue;
    height: 100px;
    width: 100px;
  }
  
  div { 
    border: 1px solid red;
    height: 200px;
    width: 200px;
  }
</style>

<div class="my-class"></div>

Siehe den Pen Classes beat tags von Geoff Graham (@geoffgraham) auf CodePen.

Aber! Das Hinzufügen des wichtigen Schlüsselworts zu den Tag-Regeln weist das Element an, die Kaskade zu ignorieren und Vorrang vor den Klassenregeln zu haben.

<style>
  .my-class { border: 1px solid red; }
  
  /* The important keyword overrides specificity priority */
  .my-class { border: 1px solid blue !important; }
</style>

<div class="my-class"></div>

Siehe den Pen !important ignores the cascade von Geoff Graham (@geoffgraham) auf CodePen.

Überschreiben von Reihenfolgeregeln

OK, wir haben bereits darüber gesprochen, wie die Reihenfolge der Regeln die Spezifität beeinflusst: unten schlägt oben und rechts schlägt links. Der sichere Weg, dies zu überschreiben, ist, !important wieder zu verwenden.

In diesem Beispiel erhält der Div den roten Rand, obwohl der blaue Rand die untere Regel ist. Dafür können Sie !important danken.

<style>
  div { border: 1px solid red !important; } /* This wins, despite the ordering */
  div { border: 1px solid blue; }
</style>

<div></div>

Siehe den Pen Important wins over ordering von Geoff Graham (@geoffgraham) auf CodePen.

Visualisierung der Kaskade

Wer hätte gedacht, dass das „C“ in CSS so viel Bedeutung hat? Wir haben hier eine Menge Stoff behandelt und hoffentlich hilft es, die Art und Weise, wie Stile durch unsere Schreibweise beeinflusst und angewendet werden, zu verdeutlichen. Die Kaskade ist ein mächtiges Werkzeug. Es gibt viele Meinungen darüber, wie man sie richtig einsetzt, aber Sie können die verschiedenen Wege sehen, wie Eigenschaften von Elementen weitergegeben und vererbt werden.

Eher visuell orientiert? Hier ist eine Übersicht, die alles zusammenfasst.