Code

Wie man CSS Spezifität benutzt

Wenn Sie planen, CSS regelmäßig zu verwenden, müssen Sie ein Verständnis dafür entwickeln, was Spezifität ist und wie sie angewendet wird.

Abgesehen von Schwimmern und Positionen kann die Spezifität eines der schwierigsten Dinge sein, an die man sich gewöhnen muss, geschweige denn Meister. Die Selektoren, die Sie in Ihrem CSS verwenden, haben alle unterschiedliche Gewichte und diese werden durch Spezifität gesteuert. Wenn Sie eine Regel auf ein Element anwenden, wird dies manchmal nicht in Ihrem Design angezeigt.

Wenn Sie sich jemals auf das gefürchtete! Wichtige Keyword verlassen haben, um Ihr CSS zu hacken, dann ist dieser Artikel für Sie.

Wie liest ein Browser CSS?

Um Ihre Grundlagen zu erhalten, müssen Sie wissen, wie der Browser CSS liest und wie Regeln außer Kraft gesetzt werden.

Zuerst liest der Browser ein Stylesheet von oben nach unten, was bedeutet, dass mit diesem Code: 

/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}

Die Regel, die Sie in Zeile 10 angegeben haben, wird überschrieben und das Anchor-Tag wird blau sein, da der Browser Regeln in Ihrem CSS berücksichtigt, die eine höhere Priorität haben.

Dies funktioniert auch mit der tatsächlichen Reihenfolge, in der Sie Ihre CSS-Dateien importieren, zum Beispiel:

Da Sie die custom.css nach der style.css platziert haben, wird alles, was Sie in style.css schreiben (Diskontierung für jetzt, das Gewicht der Selektoren) überschrieben und ersetzt, was in der custom.css steht, diese Technik wird oft verwendet durch Motiv-Ersteller, um dem Benutzer Raum zu geben, eigene Stile hinzuzufügen, ohne die Hauptdatei zu ändern. (Beachten Sie jedoch, dass custom.css style.css nicht vollständig ersetzt, sondern nur die Regeln überschrieben werden, die ausdrücklich überschrieben werden.)

Spezifität

Alles oben genannte gilt nur, wenn Sie für jeden Selektor das gleiche Gewicht verwenden. Wenn Sie IDs, Klassen oder Stapelelemente angeben, geben Sie ihnen Gewicht, und das ist Spezifität.

Es gibt vier Kategorien, die das Spezifikationsniveau eines Selektors definieren: Inline-Stile (diese werden manchmal von JavaScript verwendet), IDs, Klassen und Elemente. Wie misst man die Spezifität? Die Spezifität wird in Punkten gemessen, wobei der höchste Punktwert angewendet wird.

  • ID's sind 100 Punkte wert.
  • Klassen sind 10 Punkte wert.
  • Elemente sind 1 Punkt wert.

Dies zu wissen, wenn Sie einen Selektor wie folgt verwenden: 

#content .sidebar .module li a

Sein Gesamtgewicht beträgt 122 Punkte (100 + 10 + 10 + 1 +1), was eine ID, zwei Klassen und zwei Elemente ist.

Dinge zu erinnern

  • IDs haben viel zu viel Gewicht im Vergleich zu Klassen und Elementen, so dass Sie die Verwendung von IDs in Ihren Stylesheets auf das Nötigste beschränken sollten.
  • In Fällen, in denen die Selektoren das gleiche Gewicht haben, wird die Reihenfolge, in der sie erscheinen, wieder verwendet, wobei letztere die höhere Priorität hat.
  • Stile, die in Stylesheets in Ihre HTML-Trump-Stile eingebettet sind, da sie näher am Element liegen.
  • Die einzige Möglichkeit zum Überschreiben von Inline-Stilen besteht in der Verwendung der! Wichtig-Anweisung.
  • Pseudoklassen und Attribute haben das gleiche Gewicht wie normale Klassen.
  • Pseudoelemente haben auch das gleiche Gewicht wie ein normales Element.
  • Der Universalwähler (*) hat kein Gewicht.

Beispiele 

ul li a {color: red;}

Dieser Selektor wird eine Gewichtung von 3 haben, was bedeutet, dass Sie einfach durch Hinzufügen einer Klasse woanders diese überschreiben können. 

.content #sidebar {width: 30%;}

Dieser Selektor hat ein Gewicht von 110 Punkten, hauptsächlich wegen der ID, die 100 Punkte von insgesamt 110 addiert. 

.post p:first-letter {font-size: 16px;}

Dieser Selektor hat ein Gewicht von 12 Punkten, da das Pseudo-Element: first-letter nur 1 Punkt wiegt und auch das p-Tag. 

p {font-family: Helvetica, arial, sans-serif;}

Dieser Selektor wiegt nur 1 Punkt. Diese Art von Selektor sollte oben auf der Seite verwendet werden, wenn Sie die grundlegenden Stile markieren, die später für bestimmte Bereiche überschrieben werden können.

Denken Sie immer daran, dass Sie zum Überschreiben eines ID-Selektors 256 Klassen für das gleiche Element schreiben müssen: 

#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}

Nur so schlägt der zweite Selektor den mit der ID.

Fazit

Spezifität ist kein auffälliger Aspekt von CSS, aber meiner Meinung nach ist es der am meisten übersehene Bereich. Indem Sie Ihre Spezifität richtig machen, vermeiden Sie nicht nur Fehler, sondern beschleunigen sowohl Ihre Entwicklung als auch Ihre endgültige Website.

Verwenden Sie IDs beim Schreiben von CSS zu häufig? Fällt du jemals wieder darauf, wichtig? Lassen Sie es uns in den Kommentaren wissen.

Ausgewähltes Bild / Vorschaubild, Präzisionsbild über Shutterstock.

!wichtig css Best Practices CSS-Spezifität Überschreiben von CSS-Regeln Stylesheets