Das wichtigste CSS-Konzept zum Lernen

Mit der Cascade wurde CSS von Anfang an entworfen, und es gibt einen Grund, warum es CSS heißt - Cascading Style Sheets!

Leider hat CSS einen schlechten Ruf für dasselbe grundlegende Konzept, auf dem es basiert.

Aber was genau ist die Kaskade und ist sie so schlimm, wie die meisten Leute sie klingen lassen?

Einführung

Nehmen wir an, John schreibt eine Menge CSS und ruft dann den Browser auf, um es zu testen. Zu seiner Überraschung werden die von ihm geschriebenen Stile nicht auf das Element angewendet, das er gerade gestylt hat, sondern auf einige andere Stile!

Siehst du das genau dort? Das ist eines der schlimmsten Dinge, über die sich jeder beschwert, wenn er sagt, dass CSS scheiße ist.

Mit CSS können mehrere Stile ein einzelnes Element beeinflussen. Sie haben also paragrapheine Webseite. Dies paragraphkann jedoch buchstäblich von jedem CSS-Block gestaltet werden.

Es ist wie mit einer globalen JavaScript-Variablen, die von jeder Funktion im Code bearbeitet werden kann. Ein Rezept für eine Katastrophe, wie es scheint.

Aber auch hier bildet die Kaskade die grundlegende Begründung dafür, wie CSS überhaupt erstellt wurde.

Umfassen Sie es?

Du kannst es nicht ändern.

Was ist die Kaskade?

In der Kaskade bestimmt der Browser, welche Stile auf ein bestimmtes Element angewendet werden sollen. So einfach ist das und es ist eine anständige Interviewfrage für einen Front-End-Entwickler.

Glücklicherweise können die mit der Kaskade verbundenen Alpträume verstanden werden, da sie nur von zwei Faktoren bestimmt werden:

  1. Die Spezifität der Elementselektoren
  2. Die Reihenfolge der zu schreibenden Stile

Werfen wir einen kurzen Blick darauf.

Selektorspezifität

Sie können die Selektorspezifität damit vergleichen, wie der menschliche Verstand Anweisungen interpretiert.

Betrachten Sie zum Beispiel die folgende Grafik:

Wenn ich zu dir sagen würde: "Gib mir die rote Kiste.", Welche würdest du mir geben? Es gibt zwei von ihnen!

Sie können die folgende Frage stellen: "Welche der Boxen, a oder b?" .

Oder du schnappst dir sogar beide Kisten! Sind sie nicht beide rote Kästchen?

Dies ist die Situation, in der sich der Browser im Umgang mit Spezifität befindet.

Wenn Sie sagen, gestalten Sie den Absatz in einer roten Hintergrundfarbe…

p { background-color: red;}

Da die Seite viele Absatzelemente enthalten kann, fragt der Browser: "Welcher Absatz?"

Der Browser kann Ihnen keine Folgefrage stellen. Er versucht daher, jeden Absatz auf der Seite mit einem redHintergrund zu versehen.

Wenn Sie jedoch bereits gesagt haben, stylen Sie den Absatz mit einem Klassennamen reddymit rotem Hintergrund:

p.reddy { background-color: red;}

Das ist eine spezifischere Anfrage!

Jetzt formatiert der Browser die von Ihnen angeforderten spezifischen Absatzelemente.

Das ist es!

Technisch gesehen betrachtet der Browser jeden Selektor, der auf ein bestimmtes Element abzielt, und weist jedem von ihnen „Punktzahlen“ zu, und derjenige mit einer höheren Spezifitätspunktzahl gewinnt.

Die Art und Weise, wie die Ergebnisse berechnet werden, ist einfach.

Angenommen, der Browser hat bei der Interpretation Ihres CSS 4 Zielpfosten.

  1. Für jeden Inline-Stil, der mithilfe des styleAttributs auf ein Element abzielt, wird dem Zielpfosten 1 Ziel zugewiesen (a).
  2. Für jeden idSelektor wird 1 Ziel zum Posten zugewiesen (b).
  3. Für jeden vorhandenen classSelektor, Attributselektor und Pseudoklassen wird dem Beitrag 1 Ziel zugewiesen (c).
  4. Für jeden Elementselektor und jedes Pseudoelement wird dem Beitrag 1 Ziel zugewiesen (d).

Ich erinnere mich daran, indem ich das Akronym SICAPEP verwendete:

Bei der Zuweisung von Punkten werden die Gesamtpunkte durch Verkettung als Ziffern in einer 4-stelligen Zahl berechnet .

Ein kurzes Beispiel für die Spezifität

Beachten Sie die folgenden Stildeklarationen:

#nav .removed > a:hover {}
li:last-child h3 .title {}

Wie würde der Browser die Spezifitätspunkte für diese Selektoren berechnen?

#nav .removed > a:hover

Hier ist die Aufschlüsselung:

(a) Es gibt keinen Inline-Stil, daher beträgt die Punktzahl für den ersten Torpfosten 0.

(b) Es gibt einen idSelektor, #navdas ist eine Punktzahl von 1 für den zweiten Torpfosten.

(c) Es gibt auch einen classSelektor .removedund einen Pseudoklassen-Selektor :hover, was für den dritten Torpfosten eine Punktzahl von 2 ergibt.

(d) Es gibt einen Element-Selektor, adas ist eine Punktzahl von 1 im vierten Beitrag.

Hier ist die grafische Darstellung der Ergebnisse.

Die Gesamtspezifitätsbewertung wird als verkettet 0121.

Ist wie bei der normalen Mathematik 0001kleiner als 0005und 0121größer als 0021.

Jetzt verstehen Sie, wie die Spezifität berechnet wird.

Können Sie versuchen, die Spezifität für den anderen Selektor zu berechnen li:last-child h3 .title?

Lass mich wissen, worauf du im Kommentarbereich kommst :)

Stilreihenfolge

Der zweite Faktor, der die Kaskade beeinflusst, ist die Reihenfolge der Stile. Ein wirklich einfaches Beispiel ist das Stylen desselben Elements in zwei verschiedenen Codeblöcken.

Zum Beispiel:

p.reddy { background: red;}p.reddy { background: blue;}

Obwohl beide Selektoren die gleiche Spezifität haben, 0011kommt die Reihenfolge des Regelsatzes ins Spiel.

Die zweite Erklärung setzt die erstere außer Kraft, und der Absatz ist blau und nicht rot.

Fangfrage

Welche Farbe hätte der Linktext in Anbetracht des folgenden Dokuments?

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • Blau oder Rot?

    Beachten Sie, dass der Link sowohl inline als auch innerhalb des &lBlocks t; / style> gestaltet ist.

    Oh, wenn Sie sich sicher fühlen, sagen Sie die Antwort einfach laut - zu sich selbst.

    Die eigentliche Antwort lautet jedoch: Der Inline-Stil gewinnt immer. Das Tor wird im ersten Beitrag erzielt, der alle Tore in einem der anderen Beiträge übertrifft.

    Warum?

    Die endgültige Spezifität liegt in der Größenordnung von Tausenden - 1000 - und das schlägt 9 Tore im zweiten Beitrag. 1000 ist größer als 0900.

    HINWEIS: Wie von Paul McCann im Kommentarbereich ausgeführt, ist der obige Absatz eine übermäßige Vereinfachung. Schau dir an, was er sagt.

    Fazit

    Hoffentlich sind Sie jetzt mit dem soliden Verständnis der Funktionsweise der Kaskade ausgestattet. Das Erlernen fortgeschrittener CSS wird jetzt wahrscheinlich einfacher, und was noch wichtiger ist, Sie wissen jetzt, wo Sie suchen müssen, wenn Sie diese lästigen Fehler haben.

    Bis später!

    Bereit, Profi zu werden?

    Ich habe einen kostenlosen CSS-Leitfaden erstellt, mit dem Sie Ihre CSS-Kenntnisse sofort verbessern können. Holen Sie sich das kostenlose eBook.