CSS-Spezifität ist ein Thema, das viele neue Front-End-Codierer möglichst lange meiden. Es hört sich kompliziert an, es gibt all diese Regeln, Sie müssen vielleicht sogar ein bisschen rechnen! Wie lahm ist das?
Letztendlich kann man es nur so lange vermeiden. Spezifität ist ein wesentliches Konzept, das Sie verstehen müssen, um ein effektiver Entwickler zu sein. Heute werde ich Sie auf einfache und leicht verständliche Weise durch die Begriffe der Spezifität führen. Es ist einfacher als du denkst!
Das Kernkonzept der Spezifität
Spezifität ist ein komisches Wort, es vermittelt von Anfang an die Vorstellung, dass dies kompliziert wird. Zum Glück ist die Rinde größer als der Biss. Es gibt keinen Grund, aus dem Sie nicht auswählen können die meisten von diesem Zeug in wenigen Minuten oder weniger.
Um die praktische Anwendung der Spezifität in etwas aufzuschlüsseln, in das jeder seinen Verstand einwickeln kann, verwenden wir eine vertraute Metapher.
Wer würde in einem Kampf gewinnen?
Als Sie ein Kind waren, war die Welt viel kühler. Wenn man die Möglichkeit erhalten würde, einem wissenden Wesen eine und nur eine Frage zu stellen, hätte man nicht über den Sinn des Lebens nachgedacht oder eine Frage darüber gewagt, ob Weltfrieden erreichbar ist oder nicht, nur eine Sache wäre wichtig. Wenn Batman und Spiderman sich streiten würden, wer würde gewinnen?
ScrewAttack schreibt gewaltige Stücke, um Helden gegeneinander auszuspielen.
Es gibt diese angeborene Neugier bei Kindern, ständig Dinge zu vergleichen und zu fragen, was besser ist. Wenn wir älter werden, ersetzen Graustufen Schwarz und Weiß, und wir verlieren diese Tendenz (wir Sonderlinge sind natürlich eine Ausnahme). Um die CSS-Spezifität zu verstehen, sollten Sie zur Kindheit zurückkehren. Wenn Sie zwei ähnliche Selektoren erhalten, fragen Sie sich immer: Wer würde in einem Kampf gewinnen? Die Antwort kann sich als kritisch für die Art und Weise der Codierung erweisen.
Um zu sehen, wie das funktioniert, lassen Sie uns ein paar Selektoren gegeneinander abwägen und sehen, was passiert.
Und das Letzte wird zuerst sein
Lassen Sie uns für unseren ersten Kampf zwei im Wesentlichen identische Selektoren gegeneinander ausspielen. Woher wissen wir, welcher Selektor gewinnen würde?
Sprechen Sie über den Klassenkampf. Abgesehen davon, stellen Sie sich vor, wir hätten die folgenden Einstellungen auf unserer Webseite:
Hier haben wir ein gleiches Matchup. Beide Klassen werden auf dasselbe div angewendet, ohne dass andere Komplexitäten erforderlich sind, um das Beispiel zu verstehen. Lassen Sie sie sie kämpfen und sehen, wer gewinnt?
Die Box ist rot! Das bedeutet die .box? Klasse gewonnen. Aber warum? Sie kennen die Antwort wahrscheinlich schon richtig? Es kam zuletzt Wechseln Sie die Selektoren und wir sehen das Gegenteil:
Hier ist das Quadrat blau, weil das? Blaue? Klasse kam als letztes und überschritt die? .box? Klasse.
Klasse ändert nicht, wer Sie sind
Die letzte Schlacht war nicht sehr interessant. Die Gegner waren zu gleich stark und das Ergebnis war offensichtlich. Wir haben die Oberfläche der Spezifität noch nicht wirklich gekratzt. Trotzdem war dies ein notwendiges Fundament, das gelegt werden musste.
Jetzt tauchen wir in eine etwas saftigere Schlacht ein: ID vs. Class.
Unser Setup hier ist dem letzten Mal ziemlich ähnlich, nur anstelle von zwei Klassen haben wir eine Klasse und eine ID:
Angesichts der Regel, die wir beim letzten Mal gelernt haben, könnte man voraussagen, dass die Klasse in diesem Szenario gewinnen würde. Mal sehen, ob das stimmt.
Eine verärgert Obwohl die Klasse nach der ID kam, ging sie trotzdem verloren. Dies zeigt an, dass IDs im Kampf der Spezifität irgendwie stärker sind als Klassen.
Pseudo-Death-Match
Bevor wir uns ansehen, wie all das funktioniert, schauen wir uns ein letztes Beispiel an. Wir werden hier die Komplexität erhöhen, damit Sie wissen können, wie dieses Wissen in einer realen Situation angewendet werden kann.
Oh Schnapp! Ich wette, dieser bringt sogar einige erfahrene Leser zum Stolpern. Viele von uns kennen nicht einmal den Unterschied zwischen den beiden. Lass uns diese Party beginnen.
Was wird es sein? Wird das h2 rot oder blau sein? Lass es uns herausfinden:
Das Pseudoelement nimmt es! Die Pseudoklasse hatte keine Chance. Aber warum? Was ist hinter den Kulissen hier? Wie können wir uns des Ergebnisses sicher sein, bevor wir es überhaupt versuchen?
Regeln der Spezifität
Versuch und Irrtum sind eine großartige Möglichkeit, etwas zu lernen, aber letztendlich gibt es einfach zu viele verschiedene Szenarien, um durchzugehen, um alle Informationen zu sammeln, die wir kennen sollten. Was wir brauchen, ist ein harter und schneller Weg, um zu entscheiden, welchen Selektoren der Browser mehr Bedeutung beimisst und warum.
Es stellt sich heraus, dass es in der Tat einfache Regeln gibt, die die Spezifität bestimmen. Es gibt sogar ein praktisches Punktesystem:
Ein bestimmter CSS-Selektor kann eine beliebige Anzahl von Teilen dieses Puzzles enthalten. Der Trick, um die Spezifität herauszufinden, besteht darin, sie zusammenzufassen. Derjenige mit der höchsten Punktzahl gewinnt. So einfach ist das.
Niemand mag Mathematik. Um die Spezifität eines Selektors zu testen, können wir den erstaunlichen Spezifitätsrechner in der Keegan Street verwenden.
Mit diesem großartigen Tool können wir zwei Selektoren eingeben und eine Bewertung für jeden wird automatisch berechnet. Der erste Selektor im Beispiel enthält eine Klasse, eine Pseudoklasse und zwei Elemente (Score: 0,0,2,2). Der zweite Selektor schlägt es mit einer ID, einer Klasse, einer Pseudo-Klasse und einem Element (Score: 0,1,2,1).
Die Regel hier ist, wie Sie sehen können, dass der Selektor mit der höchsten Spezifität gewinnt.Mit anderen Worten, spezifischere Selektoren übertreffen weniger spezifische Selektoren.
Anhand unseres vorherigen Beispiels einer Klasse gegenüber einer ID können wir sehen, warum die ID gewinnt. Seine Spezifität ist weitaus höher als die der Klasse, daher überschreibt sie die Klasse.
Sonderregeln
Angesichts des Spezifitätsrechners können wir die meisten Szenarien herausfinden, aber es gibt ein paar Kurvenbälle, die wir berücksichtigen müssen.
- Der Universalselektor (*) ist 0 wert
- Wenn zwei Selektoren dieselbe Spezifität haben, gewinnt der letzte
- Elemente können niemals einen Klassenselektor schlagen, selbst wenn Sie sie aufstapeln
- Wichtig ist Superman, er kann fast alles verprügeln
Der letzte hier ist der interessanteste, schauen wir uns ein Beispiel an. Hier sind einige HTML und CSS zu beachten:
Einfach genug, richtig? Bei Verwendung unseres Punktesystems wird die Klasse höher bewertet als das Element, sodass die Überschrift ausgegeben wird rot. Was aber, wenn wir Superman in das Szenario werfen?
Jetzt haben wir den Kampf manipuliert. In diesem Fall kommt die Überschrift tatsächlich heraus Blau! Die! Wichtige Regel besagt: "schrauben Sie Ihre Besonderheit" und macht was es will.
Weniger ist mehr
Nachdem Sie nun die Besonderheiten verstanden haben, können Sie Ihr CSS so manipulieren, dass es viele verrückte Dinge tut. Denken Sie daran, dass mit großer Kraft eine große Verantwortung entsteht.
In CSS gilt als allgemeine Regel, dass weniger mehr ist. Je kürzer Ihre Regeln, desto besser. Benutze niemals .list ul> li> a wann li a wird gut funktionieren. Kürzere Selektoren sind effizienter und leichter lesbar. Manchmal muss man ausgefallen sein, aber das sei die Ausnahme, nicht die Regel.
Ein Puzzle zum Lösen
Warten Sie einen Augenblick. Die Regeln sollten die Ergebnisse erklären, die wir in unseren ersten Tests erhalten haben, nicht wahr? Also was ist mit diesem?
Soweit ich die Regeln verstehe, schlägt eine Pseudoklasse ein Pseudoelement. Warum gewinnt das Pseudoelement hier? Vielleicht liegen wir falsch, was das Pseudoelement ist, lasst uns unser Diagramm überprüfen.
Nee. Wir hatten Recht, dass First-Child die Pseudo-Klasse gegenüber der First-Line, dem Pseudo-Element, war. Vielleicht berechnen wir es falsch? Sehen wir uns den Rechner an:
In Bezug auf den Rechner sollte die Überschrift blau sein, da das erste Kind die erste Zeile schlägt. Aber so funktioniert das im Browser nicht. Was gibt? Vielleicht ist unser Rechner kaputt, versuchen wir einen anderen.
Dem ersten zufolge sollte das erste Kind einen höheren Spezifitätswert haben und daher gewinnen. aber es tut nicht Ich habe versucht, die Ein-Doppelpunkt-Syntax zu verwenden und die Reihenfolge zu ändern. nichts funktioniert. Das Pseudoelement gewinnt immer, egal was ich draufwerfe.
Hier wird es wirklich wahnsinnig, auch wenn ich in einem Inline-Style-Element werfe, das fast alles schlagen sollte, kommt das Dang-Ding immer noch rot!
Konzeptionell macht das fast Sinn. Unsere Pseudoklasse zielt auf das gesamte h2-Element ab, während unser Pseudo-Element nur die erste Zeile dieses Elements anvisiert, was spezifischer erscheint.
Ihre Erklärung hier
Um ehrlich zu sein, bin ich hier etwas ratlos. In den meisten Fällen ist die Spezifität ziemlich unkompliziert, aber ich denke nicht, dass ich mich mit diesem Thema beschäftige. Mein Instinkt ist, dass es sich um eine Art Vererbungsproblem handelt, aber ich bin mir nicht sicher. Es könnte auch etwas ähnliches sein :nicht() was in Bezug auf die Spezifität eine besondere Bedeutung hat (nur die Elemente in Klammern zählen, an sich ist es eine Null).
Als Antwort auf unser kleines Puzzle hier ein paar hilfreiche Antworten von Lesern!
Tim Pietrusky
Laut der Spezifikation ist nur ein anderes Element, das den Inhalt der ersten Zeile umgibt, spezifischer als das Pseudoelement der ersten Zeile. - CodePen Demo
Thomas
Denken Sie an die erste Zeile als zusätzliches Element (wie den Span) innerhalb der Überschrift und wickeln Sie nur die erste Zeile ein, sodass das Ziel ein Element innerhalb der h2 ist
erste Zeile zweite Zeile
Die Hintergrundfarbe von h2 würde nur verwendet (vererbt), wenn für :: first-line kein Wert deklariert würde.
Lesen Sie weiter
Es wurden bereits viele großartige Artikel zur Spezifität veröffentlicht, hier einige:
- CSS-Spezifität: Dinge, die Sie wissen sollten - Smashing Magazine
- Besonderheiten zur CSS-Spezifität - CSS-Tricks
- CSS-Spezifität für Pokerspieler - Ich bin eine Kamera
- CSS-Spezifität verstehen - Jonathan Snook
- Die Kraft der CSS-Spezifität - DIY-Themen
Fazit
Wie wir gerade gesehen haben, ist die CSS-Spezifität sehr einfach, außer wenn sie sehr komplex ist. Sie können und sollten die Grundlagen erlernen, um unerwartete Ergebnisse zu vermeiden, aber wenn es darauf ankommt, kann es vorkommen, dass ein guter altmodischer Versuch und Irrtum erforderlich ist, wenn Sie auf eine schwierige Situation treffen.
Was denkst du? Verstehst du die Besonderheit so viel wie du solltest? Können Sie das rätselhafte Szenario erläutern, in das wir oben geraten sind?