CSS-Spezifität: Mit diesen Strategien wird sie möglichst gering gehalten
Kommentare

Ein Zeichen, ob die angewandten CSS-Styles in einem Projekt relativ harmonisch miteinander arbeiten, ist eine niedrige CSS-Spezifität – also das Mittel, mit dem der Browser entscheidet, welcher Property-Wert für ein Element am bedeutendsten ist und darum auf das Element angewandt wird.

Meist steigt die Spezifität allerdings mit der Zeit, etwa weil Styles aufgehoben werden müssen. Chris Coyier erläutert einige Strategien, mit denen die CSS-Spezifität trotzdem auch über eine längere Zeit niedrig gehalten werden kann.

Klassennamen ändern, um Spezifität gering zu halten

Es gibt verschiedene Möglichkeiten und Strategien, mit denen die Spezifität gering gehalten werden kann. Ein typisches Beispiel, bei dem die Spezifität nach oben getrieben wird, ist das Aufheben eines bestehenden Selektors mit einem Hoch-Spezifitäts-Selektor, oder das Auswählen eines Elements, das in mehreren Seiten enthalten ist. Um das Ansteigen der Spezifität zu verhindern, sollte dabei wenn möglich der Klassenname des Elements verändert werden.

Auch das Hinzufügen von zusätzlichen Klassennamen um das Aufheben eines Styles zu handhaben, ist ein typisches Szenario, bei dem es durch die Anordnung der Selektoren im Stylesheet zu Problemen mit der Spezifität kommen kann. Haben zwei Selektoren die gleiche Spezifität, wird der Property-Wert des zuletzt deklarierten Selektor angewandt. Um dies zu umgehen, muss die Aufhebungs-Klasse am Ende des Stylesheets angegeben werden.

Eine weitere Strategie, um die Spezifität niedrig zu halten, ist die Spezifität des Elements, das aufgehoben werden soll, zu verringern, indem zum Beispiel IDs entfernt werden. Auch kann es helfen, bereits von Beginn an mit Klassen zu arbeiten, auch wenn man diese vielleicht zunächst nicht benötigt.

Mit einer soliden Basis arbeiten

Je älter ein Projekt ist, desto riskanter ist das Ändern von Selektoren mit einer niedrigen Spezifität, weil sie potenziell mehr Elemente beeinflussen können. Darum ist es wichtig, eine möglichst solide Basis zu haben, von der aus gearbeitet wird, weil so weniger Aufhebungen nötig sind. Um dies zu erreichen, gibt es gleichfalls verschiedene Strategien, zum Beispiel der Einsatz von Pattern-Libraries, Style Guides oder Atomic Designs.

Genauso ist es möglich, mit einer „opt-in“-Typography zu arbeiten, also erst dann Text-Styling einzusetzen, wenn es wirklich nötig ist, anstatt Elemente mit Default-Aktionen auszustatten. Zwar wird so die Spezifität der entsprechenden Selektoren erhöht, allerdings nehmen sie nur auf das Einfluss, auf das sie auch tatsächlich Einfluss nehmen sollen. Dadurch sind am Ende weniger Aufhebungen nötig.

Ist es unumgänglich, zwei Selektoren mit sich gegenüberstehenden Spezifitäten zu nutzen, kann die Spezifität des einen Selektors leicht verändert werden, etwa durch einen Tag-Qualifier oder dem Hinzufügen einer zusätzlichen Klasse.

Für Präprozessoren wird meist davon abgeraten, Elemente zu nesten, auch wenn dies meist leichter lesbar und verständlich ist. Durch die Nutzung von Ampersand in Sass kann man Namespacing betreiben, wodurch die Spezifität ebenfalls gering gehalten wird.

Ein weiterer Versuch, die Spezifität beim Aufheben niedrig zu halten, ist die Verwendung eines bestehenden Wrapping-Elements auf den Bereich, der aufgehoben werden soll. Zudem gibt es noch andere Strategien, die Chris Coyier in seinem Artikel beschreibt. Dort finden sich auch zahlreiche Code-Beispiele für den Einsatz der entsprechenden Methoden.

In jedem Fall ist es ratsam, zu versuchen, die Spezifität niedrig zu halten und Aufhebungen so wenig wie möglich zu verwenden, um spätere Probleme im Styling zu verhindern.

Aufmacherbild: The meaningful photo of chess king staying before the set of another colour pieces. von Shutterstock / Urheberrecht: Fisher Photostudio

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -