Specificity – Die Rangordnung im CSS

Bevor wir genauer auf das Thema eingehen stellen wir uns einmal folgende Frage:

Wie wird das Resultat bei folgendem DOM/CSS aussehen?

<style>
  main p {
    color: red;
  }
  main p {
    color: green;
  }
</style>
<main>
  <p>Text 1</p>
</main>
<p>Text 2</p>

Hier haben wir 2 mal den gleichen Selektor aber unterschiedliche Properties innerhalb dieser Selektoren.

Jedoch wie Screenshot zu sehen wird der 2 Selektor angewandt, nicht der erste.

Grund dahinter ist, dass immer die zuletzt definierten Stylings angewendet werden, die für einen Selektor definiert wurden. Egal ob die Datei über eine extra .css Datei eingebunden wurde oder ob das CSS in der .html definiert wurde.

Elemente, Klassen, IDs und Inline Styling

Element-Selektoren

Element-Selektoren haben KEINEN Prefix und bestehen somit nur aus dem Namen des HTML-Tags ohne die <>

main {
  color: red;
}

<main></main>

Klassen-Selektoren

Klassen-Selektoren haben den Prefix . und greifen auf alle HTML-Tags mit der definierten Klasse.

.my-class {
  color: green;
}

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

ID-Selektoren

ID-Selektoren haben den Prefix # und greifen auf alle HTML-Tags mit der definierten ID.
Jedoch muss hier dazu gesagt werden, dass laut HTML Spezifikation eine vergebene ID nur einmal im DOM vorkommen darf und nicht mehrmals vergeben werden darf!

#my-id {
  color: teal;
}

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

Die Rangordnung

Nun zum wichtigsten Thema in diesem Bereich: Wann greift welcher Selektor?

Wie in den vorherigen Beiträgen schon kurz beschrieben wird immer der zuletzt definierte Selektor angewendet. Jedoch was machen wir, wenn wir nicht an letzter Stelle im DOM sind für unser Styling?

Problem

<style>
  p {
    color: red;
  }
  <!-- PLUGIN CSS START -->
  p {
    color: green;
  }
  <!-- PLUGIN CSS END -->
</style>
<main>
  <p>Text 1</p>
</main>

Hier haben wir ein DOM, welches den Text innerhalb des Paragraphs nun grün anzeigt da die 2 Selektoren gleichwertig sind.

Wie aber in den HTML Kommentaren zu sehen, ist der 2 Selektor von einem Plugin eingefügt worden und daher sollten wir diesen nicht anpassen. Wir wollen aber, dass die Textfarbe rot ist und nicht grün.

Lösung

Die „Specificity“ von unserem Selektor erhöhen.

<style>
  main p {
    color: red;
  }
  <!-- PLUGIN CSS START -->
  p {
    color: green;
  }
  <!-- PLUGIN CSS END -->
</style>
<main>
  <p>Text 1</p>
</main>

Wie funktioniert das?

Der Browser vergibt jedem Selektor ein „Ranking“ mit dem definiert wird, wie „spezifisch“ ein Selektor definiert wird.

Dieses Ranking baut sich wie folgt zusammen:

Hier ein paar Beispiele:

Der Browser vergleicht dann die „Specificity“ zwischen den Selektoren und derjenige Selektor, der die höchste „Specificity“ für ein Element hat, wird angewendet.

Das böse !important

Zu jedem Property kann am Ende vor dem Strichpunkt ein !important hinzugefügt werden um sozusagen dieses Property „unbedingt“ anzuwenden.

.my-class {
  color: red !important;
}

#my-id {
  color: green;
}
<div class="my-class" id="my-id"></div>

Durch das !important wird die „Specificity“ des ersten Selektors zusätzlich um 10000 erhöht (also ganz am Anfang noch eine 1 dazu) und dadurch wird der Text in diesem <div> nun rot angezeigt und nicht grün.

Das Problem besteht hier nur darin, dass es im Nachhinein nur mehr sehr mühsam möglich ist weitere Styling-Anpassungen für dieses Element bzw. diese Property durchzuführen.

Best Practises für Specificity

Prinzipiell sollte das Styling für Elemente von der „Specificity“ her sehr niedrig gehalten werden.

Daher wird empfohlen nur mit Elementen und Klassen zu arbeiten keine IDs, Inline Style Attribute oder !important zu verwenden.

Als CSS-Klassen-Struktur ist hier z.B. das BEM-Model eine Möglichkeit eine erweiterbare CSS-Klassen-Struktur aufrecht zu erhalten.

Source: https://css-tricks.com/specifics-on-css-specificity/