Wie man CSS-Spezifitätsprobleme angeht und wann man das Schlüsselwort! Important verwendet

Eine Fallstudie

Kürzlich gab es eine Twitter-Umfrage, bei der der Benutzer seinen Followern eine Frage zur CSS-Spezifität stellte. Leider konnte ich den Original-Tweet nicht finden (Kommentar unten, falls Sie ihn zufällig finden!), Aber kurz gesagt, die Mehrheit der Leute hat die Antwort falsch verstanden.

Diese Twitter-Umfrage (und ihre Folgen) führte dazu, dass ich mein eigenes Wissen über das Thema Spezifität auffrischte und im Gegenzug anfing, Spezifitätsprobleme in meinen eigenen Projekten zu beheben - was mich zum Zweck dieses Beitrags bringt.

In diesem Beitrag werden wir den CSS-Code aus einem meiner Projekte mit CSS-Spezifitätsproblemen umgestalten, die behoben werden müssen.

CSS-Spezifität

Definition

Die Spezifität wird von MDN Web Docs wie folgt beschrieben:

die Mittel, mit denen Browser entscheiden, welche CSS-Eigenschaftswerte für ein Element am relevantesten sind und daher angewendet werden.

Regeln

Bei der Entscheidung, welche CSS-Eigenschaftswerte für ein Element am relevantesten sind, verwendet der Browser die Quellreihenfolge (dh die Kaskade) des CSS-Stylesheets, um dies zu bestimmen. Diese Regel gilt jedoch, wenn die CSS-Selektoren die gleiche Spezifität aufweisen. Was passiert, wenn die Spezifität eines CSS-Selektors höher ist als die eines anderen?

In diesem Fall verwenden Browser die Spezifität eines CSS-Selektors, um zu bestimmen, welche CSS-Anweisungen angewendet werden sollen. Je höher die Spezifität eines CSS-Selektors ist, desto wahrscheinlicher ist es, dass Browser seine CSS-Deklarationen auf einen anderen anwenden.

nav a { color: green; } a { color: red; }

Im obigen Beispiel zielen beispielsweise beide CSS-Selektoren auf dasselbe HTML-Element, das Ankertag. Um zu bestimmen, welche CSS-Regel auf das Ankertag angewendet werden soll, berechnet der Browser den Spezifitätswert und prüft, welcher der höchste ist. In diesem Fall hat der erste Selektor einen höheren Spezifitätswert, daher verwendet der Browser seine Deklarationen, um auf das Ankertag anzuwenden.

Ich möchte hier darauf hinweisen, dass ! Important zwar kein CSS-Selektor ist, es sich jedoch um ein Schlüsselwort handelt, mit dem eine CSS-Regel unabhängig vom Spezifitätswert, Ursprung oder Quellreihenfolge eines CSS-Selektors zwangsweise überschrieben wird. Einige Anwendungsfälle umfassen:

  • Temporäre Korrekturen (ein bisschen wie Klebeband auf ein undichtes Rohr kleben)
  • Inline-Styling überschreiben
  • Test- / Debugging-Zwecke

So nützlich die Verwendung des Schlüsselworts ! Important auch sein mag, die Verwendung kann eher problematisch als hilfreich sein. Im Laufe der Zeit kann es schwierig sein, Ihr CSS zu pflegen, und es kann sich negativ auf die Lesbarkeit Ihres Stylesheets auswirken, insbesondere für alle anderen, die in Zukunft damit arbeiten oder arbeiten werden.

Das bringt uns zu dem, was wir heute tun werden - die Behebung der Spezifitätsprobleme in einem Projekt.

Das Projekt

Ein kleiner Hintergrund über das Projekt, das wir umgestalten werden - es ist eine von Netflix inspirierte Landing Page, die die MovieDB-API verwendet.

Das Stylesheet

Ziel ist es, das Schlüsselwort "! Important" aus den CSS-Regeln zu entfernen, auf die es angewendet wurde, indem der Code so umgestaltet wird, dass er den Spezifitätsregeln folgt.

Unten sehen Sie das Stylesheet für das Projekt.

@import url("//fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { width: 100%; } .wrapper #header { position: fixed; z-index: 300; padding: 15px; width: calc(100% - 30px); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, black 0%, transparent 100%); } .wrapper #header #brand-logo { color: #d32f2f; text-shadow: 1px 1px 2px black; letter-spacing: 5px; text-transform: uppercase; font-family: Montserrat; font-weight: bold; font-size: 22px; } .wrapper #header #menu-icon { display: none; } .wrapper #header .nav-link, .wrapper #header .icon { color: #bdbdbd; cursor: pointer; } .wrapper #header .nav-menu { width: 400px; display: flex; justify-content: space-around; align-items: center; } .wrapper #header .nav-link { padding: 5px 10px; font-size: 15px; font-family: century gothic; text-decoration: none; transition: background-color 0.2s ease-in; } .wrapper #header .nav-link:hover { color: #c62828; background-color: rgba(0, 0, 0, 0.7); } .wrapper #header .icon { font-size: 16px; } .wrapper #header .icon:hover { color: #c62828; } .wrapper #site-banner, .wrapper #categories { width: 100%; } .wrapper #site-banner { height: 550px; background-image: url("//s1.gifyu.com/images/rampage_2018-1024x576.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn, .wrapper #site-banner .main-overview { position: absolute; z-index: 3; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn { text-transform: uppercase; } .wrapper #site-banner .main-movie-title { top: 120px; left: 20px; background: -webkit-linear-gradient(#ff9100, #dd2c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 55px; font-family: Montserrat; font-weight: bold; } .wrapper #site-banner .main-overview { width: 400px; top: 230px; left: 25px; color: #fafafa; line-height: 25px; font-family: helvetica; } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; top: 350px; left: 25px; border: none; border-radius: 20px; color: #fafafa; cursor: pointer; transition: all 0.2s ease-in; background-color: #ff0000; box-shadow: 1px 5px 15px #940000; } .wrapper #site-banner .watch-btn:hover { color: #F5F5F5; background-color: #940000; } .wrapper .after { position: relative; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .wrapper #categories { padding: 30px 0; display: flex; flex-direction: column; background: linear-gradient(to top, #090909 0%, #000000 100%); overflow: hidden; } .wrapper #categories .category { margin: 30px 0; } .wrapper #categories .category-header, .wrapper #categories .content { margin-left: 20px; color: #B0BEC5; font-family: helvetica; } .wrapper #categories .category-header { margin-bottom: 50px; font-weight: normal; letter-spacing: 5px; } .wrapper #categories .content { position: relative; right: 0; display: flex; justify-content: flex-start; transition: all 3s ease-in-out; } .wrapper #categories .movie { margin-right: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .wrapper #categories .movie-img { transition: all 0.2s ease-in; } .wrapper #categories .movie-img:hover { -webkit-filter: contrast(1.1); filter: contrast(1.1); -webkit-transform: scale(1.05); transform: scale(1.05); cursor: pointer; } .wrapper #footer { width: 100%; height: 120px; background-color: #090909; display: flex; align-items: flex-end; justify-content: flex-start; } .wrapper #footer #copyright-label { margin-left: 20px; padding: 10px; color: rgba(255, 255, 255, 0.3); opacity: 0.7; letter-spacing: 2px; font-family: helvetica; font-size: 12px; } //Media Query @media (max-width: 750px) { .nav-menu { visibility: hidden; } #menu-icon { display: block !important; font-size: 22px; } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; font-size: 13px; } .movie-img { width: 170px; } }

Aus dem Stylesheet können wir also ersehen, dass sich die Verwendung des Schlüsselworts ! Important hauptsächlich auf den Abschnitt zur Medienabfrage konzentriert, in dem die Stile aufgeführt sind, die der Browser anwenden sollte, wenn die Bildschirmbreite weniger als 750 Pixel beträgt.

Was passiert also, wenn wir das Schlüsselwort ! Important aus den CSS-Regeln entfernen, auf die es angewendet wurde? Nun, wir haben keine "Trumpfkarte" mehr, die die CSS-Regeln anderer CSS-Selektoren, die auf dasselbe HTML-Element abzielen, zwangsweise außer Kraft setzt. Der Browser überprüft daher das Stylesheet, um festzustellen, ob widersprüchliche CSS-Regeln vorliegen.

Wenn dies der Fall ist, verwendet der Browser die Quellreihenfolge, Spezifität und Wichtigkeit der CSS-Selektoren, um zu bestimmen, welche CSS-Regeln auf andere angewendet werden sollen. Wenn die CSS-Selektoren mit widersprüchlichen CSS-Regeln die gleiche Spezifität aufweisen, verwendet der Browser die Regel für die Quellreihenfolge und wendet die CSS-Regeln des CSS-Selektors an, der sich weiter unten im Stylesheet befindet. Anhand dieser Informationen können wir erkennen, dass dies bei unserem Stylesheet nicht der Fall ist.

Wenn jedoch die CSS-Selektoren mit widersprüchlichen CSS-Regeln nicht die gleiche Spezifität aufweisen, wendet der Browser die CSS-Regeln des CSS-Selektors mit höherer Spezifität an. Wir können unserem Stylesheet entnehmen, dass dies der Fall ist. Die CSS-Selektoren in unserer Medienabfrage weisen eine geringere Spezifität auf als die CSS-Selektoren im Hauptteil unseres Stylesheets.

Nachdem wir das Problem identifiziert haben, können wir es beheben!

Zuerst müssen wir die entsprechenden CSS-Selektoren suchen, die mit den CSS-Selektoren in unserer Medienabfrage übereinstimmen.

.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { #menu-icon { display: block !important; ... } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; ... } }

Wir können sehen, dass die CSS-Selektoren im Hauptteil des Stylesheets eine höhere Spezifität aufweisen als die entsprechenden CSS-Selektoren in der Medienabfrage. Obwohl die CSS-Selektoren in der Medienabfrage später im Stylesheet angezeigt werden, wendet der Browser aufgrund von Spezifitätsregeln (die Vorrang vor den Regeln für die Quellreihenfolge haben) die CSS-Regeln der vorangegangenen CSS-Selektoren an.

Um dies zu beheben, müssen wir die Spezifitätswerte der CSS-Selektoren in der Medienabfrage erhöhen. Wenn wir dafür sorgen, dass die CSS-Selektoren, die auf dieselben HTML-Elemente abzielen, die gleiche Spezifität haben, folgt der Browser der Regel für die Quellreihenfolge. Die in der Medienabfrage (die sich weiter unten im Stylesheet befindet) beschriebenen CSS-Regeln werden angewendet, wenn die Bildschirmbreite weniger als 750 Pixel beträgt.

Das Endergebnis sieht folgendermaßen aus:

.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { .wrapper #header #menu-icon { display: block; ... } .wrapper #site-banner .main-movie-title { font-size: 45px; } .wrapper #site-banner .main-overview { width: 350px; font-size: 14px; } .wrapper #site-banner .watch-btn { width: 130px; height: 25px; font-size: 13px; } }

Und das ist es! Wir haben alle Spuren des Schlüsselworts ! Important aus dem Stylesheet entfernt. Wir können bereits sehen, dass das Stylesheet leichter zu lesen ist, und Sie können sich vorstellen, dass unser überarbeitetes Stylesheet viel einfacher zu bearbeiten und zu warten ist (insbesondere, wenn andere auch daran arbeiten).

Fazit

Also, was haben wir gelernt?

Wir haben gelernt, wie Browser anhand der Quellreihenfolge, der Spezifität und der Herkunft der Selektoren bestimmen, welche CSS-Stile angewendet werden sollen. Wir haben auch gelernt, welche Probleme durch die Verwendung von ! Important in Ihrem CSS entstehen können und warum die Verwendung auf ein Minimum beschränkt werden sollte.

Wir müssen nicht auf ! Important zurückgreifen, um Probleme zu beheben - es gibt viel bessere Lösungen.

Das Konzept der Spezifität kann eine Weile dauern, bis Sie sich zurechtfinden. Ich hoffe jedoch, dass Sie durch die Dokumentation des Prozesses und die Verwendung eines realen Projekts das Konzept der Spezifität besser verstehen und es in Ihrem eigenen CSS anwenden können.

Zusätzliche Ressourcen

  • MDN-Webdokumente
  • Batficity von Mandy Michael
  • CSS Specificity Wars von Andy Clarke
  • Spezifitätsvisualisierer von Francesco Schwarz.
  • Bei der Verwendung von! Wichtig ist die richtige Wahl von Chris Coyier

Das Projekt, an dem wir gearbeitet haben, finden Sie hier.

Ich hoffe dir hat dieser Beitrag gefallen! Wenn ja, ❤️ ,? und Teile! Bis zum nächsten Mal! ✌️