CSS-Spezifität meistern: Der ultimative Leitfaden für Webflow

Na dann, Webflow-Ninjas, es ist Zeit, sich dem Biest namens CSS-Spezifität zu stellen. CSS-Spezifität ist das Regelwerk, mit dem ein Browser entscheidet, welche CSS-Regel gewinnt, wenn mehrere Regeln dasselbe Element ansprechen. Und damit das Ganze möglichst gründlich wird, schauen wir uns auch an, wie das Client-First-System von Finsweet dein CSS sauber und wartbar hält und dein altes Stylesheet schlank bleibt. Wir sind heutzutage ja nur ein kleines, „reines“ Webflow-Studio. Angefangen haben wir allerdings schon etwas vor Webflow, also kannten wir uns mit CSS ziemlich gut aus. Wir wissen aber genau, dass viele Webflow-Designer CSS überhaupt erst in Webflow lernen, und daran ist nichts auszusetzen. Wer CSS-Spezifität so früh wie möglich versteht, macht sich als Webflow-Entwickler vieles leichter. Aber genug der Vorrede, legen wir los.

Was ist CSS-Spezifität?

Stell dir CSS-Spezifität als Punktesystem vor, bei dem verschiedene Selektortypen unterschiedlich viel zum Spezifitätswert beitragen. Je höher die Spezifität, desto mehr Vorrang hat die Regel. Hier die Rangfolge der Spezifität:

1. Inline-Styles: 1000 Punkte. Sie sind am spezifischsten.
2. IDs: 100 Punkte. Sehr spezifisch.
3. Klassen, Attribute und Pseudoklassen: je 10 Punkte. Mittelmäßig spezifisch.
4. Elemente und Pseudoelemente: je 1 Punkt. Am wenigsten spezifisch.

Beispielrechnung:

• #header = 100 Punkte (ID-Selektor).
• .menu .item = 10 + 10 = 20 Punkte (zwei Klassenselektoren).
• ul li a = 1 + 1 + 1 = 3 Punkte (drei Elementselektoren).

Wichtig! Diese Punkte sind eine praktische Denkhilfe, aber kein echter Wert zur Basis 10. Der Browser vergleicht die Spalten nacheinander, beginnend bei der spezifischsten, daher schlägt eine einzige ID beliebig viele Klassen. Außerdem fügt :where() überhaupt keine Spezifität hinzu, während :is(), :not() und :has() die Spezifität des spezifischsten Selektors in den Klammern übernehmen. Haben zwei Regeln exakt dieselbe Spezifität, gewinnt die Regel, die im Stylesheet weiter unten steht.

Schauen wir uns das anhand weiterer Beispiele genauer an, damit klar wird, wie Spezifität in der Praxis funktioniert.

Beispiel 1: Selektoren kombinieren

Nimm diese Regeln:

Ein Anker <a> innerhalb eines Elements mit der ID #nav und der Klasse .nav-item wird rot, weil der Selektor .nav-item a mit 11 Punkten eine höhere Spezifität hat als .nav-item. Die Regel #nav hat hier nichts mitzureden, denn sie zielt auf das Element mit dieser ID, und der Anker erbt davon nur. Eine Regel, die den Anker direkt anspricht, schlägt einen geerbten Wert immer.

Beispiel 2: Spezifität überschreiben

Nimm diese Regeln:

Ein <p>-Element mit der ID #content und der Klasse .section bekommt einen gelben Hintergrund, weil der ID-Selektor die höhere Spezifität hat.

CSS-Spezifität in Webflow

Webflow ist hervorragend für visuelles Webdesign, aber unter der Haube ist alles CSS. Wenn du Spezifität verstehst, findest du leichter heraus, warum bestimmte Styles nicht greifen.

Beispiel in Webflow

Angenommen, du hast diese CSS-Regeln:

Ein Absatz mit der ID #hero und der Klasse .header wird rot, weil der ID-Selektor die höhere Spezifität hat.

Gehen wir noch einen Schritt weiter mit einem komplexeren Beispiel:

Hier bekommt ein h2 innerhalb eines Elements mit der Klasse .article, das wiederum in einem Element mit der ID #main-content liegt, eine Schriftgröße von 2em.

Der Webflow Designer

Das klingt doch super einfach, oder? In Webflow sieht es natürlich ein bisschen anders aus. Es ist eine visuelle Entwicklungsplattform, also: Was ist was, wo sehe ich es, und was wirkt auf was?

Alle diese Fragen sind völlig berechtigt, denn wenn du ein Element im Designer nur so ansiehst wie auf dem Bild unten, erfährst du außer dem Klassennamen nicht viel.

Was verrät dir der Designer also? Zuerst sehen wir ganz einfach die Struktur, was uns schon sofort weiterhilft.

Noch wichtiger: Wir sehen genau, wovon das Element erbt, wenn wir rechts im Designer direkt über dem Klassennamen klicken.

Das Client-First-System von Finsweet

Das Client-First-System von Finsweet ist ein Gamechanger, um deine Webflow-Projekte organisiert und skalierbar zu halten. Es setzt auf einen strukturierten Ansatz für CSS, der leicht verständlich und wartbar ist.

Grundprinzipien von Client-First

• Globale Klassen: Definieren allgemeine Styles, die du im ganzen Projekt wiederverwenden kannst.
• Custom-Klassen: Gelten für einzelne Komponenten und machen Styles modular.
• Utility-Klassen: Klassen mit nur einem Zweck für kleine Anpassungen.

Beispiel (die Klassennamen hier sind nur illustrativ, echte Client-First-Namen findest du weiter unten):

Noch ein genauerer Blick auf das Client-First-System von Finsweet:

Klassentypen in Client-First

1. Utility-Klassen: Werden global angewendet, für bestimmte CSS-Eigenschaften.
   • Beispiel: .background-color-primary { background-color: #ff0000; }
2. Custom-Klassen: Gelten für Komponenten oder Elemente, oft mit Unterstrichen.
   • Beispiel: header_background-layer
3. Globale Klassen: Werden im ganzen Projekt verwendet und sorgen für Einheitlichkeit.
   • Beispiel: .margin-large { margin: 3rem; }

Combo-Klassen verwenden

Combo-Klassen in Client-First nutzen eine Basisklasse und ergänzen Varianten mit dem Präfix is-.

• Beispiel (Schreibweise im Designer, in CSS ist das .button.is-primary): button is-primary { background-color: #007bff; }

Tiefes Stapeln vermeiden

Tiefes Stapeln bedeutet, viele Klassen auf ein Element zu legen, wovon Client-First abrät. Verwende stattdessen gut organisierte, klare Klassennamen, damit der Code lesbar und handhabbar bleibt.

• Beispiel für tiefes Stapeln: class="text-bold text-large text-center"
• Besserer Ansatz: eine einzelne Custom-Klasse wie .header-text

Warum die Reihenfolge der Klassen in Webflow wichtig ist

Webflow schreibt deine Klassen in der Reihenfolge ins Stylesheet, in der du sie erstellt hast, und wenn zwei Klassen dieselbe Spezifität haben, gewinnt die später erstellte. Deshalb kann es ein Spacing-System kaputt machen, wenn du es in der falschen Reihenfolge einfügst, und genau das behebt das Reorder-Tool der Finsweet-Erweiterung. Combo-Klassen sind die andere Hälfte der Geschichte, die wir in unserem Beitrag über CSS-Blend-Modes mit Combo-Klassen und in einer Blog-Zusammenfassung mit Combo-Klassen behandelt haben. Wenn du abwägst, ob Client-First überhaupt zu dir passt, lies ob Finsweet Client-First das Richtige für dich ist.

Praktische Tipps für den Umgang mit Spezifität

1. Inline-Styles vermeiden: Sie haben die höchste Spezifität und können fast alles andere überschreiben.
2. ID-Selektoren sparsam einsetzen: Bei zu häufiger Verwendung machen sie dein CSS kompliziert.
3. Styles hierarchisch organisieren: Nutze Systeme wie Client-First, damit dein CSS modular und wartbar bleibt.
4. Den Webflow Designer nutzen: Die visuellen Werkzeuge helfen dir, deine Styles zu überblicken und zu verwalten, aber nachträglich umzusortieren kann schwierig sein, sobald du angefangen hast. Klone am besten das Finsweet Client-First Cloneable oder andere wie Relume, wenn du diesen Weg gehen willst.
5. Die Finsweet-Chrome-Erweiterung zum Umsortieren nutzen: Bedenke, dass das ein fortgeschrittener Schritt ist und du CSS-Spezifität sicher verstehen solltest, aber mit der Finsweet-Erweiterung kannst du die Klassen in Webflow tatsächlich umsortieren.

FAQ zur CSS-Spezifität

Was ist CSS-Spezifität?

CSS-Spezifität ist der Wert, den ein Browser jedem Selektor gibt, um zu entscheiden, welche Regel gewinnt, wenn mehrere Regeln dieselbe Eigenschaft eines Elements setzen. Inline-Styles schlagen IDs, IDs schlagen Klassen, Attribute und Pseudoklassen, und diese schlagen einfache Elemente und Pseudoelemente.

Wie berechnet man CSS-Spezifität?

Zähle im Selektor zuerst die IDs, dann die Klassen, Attribute und Pseudoklassen, dann die Elemente und Pseudoelemente, und vergleiche die Zahlen von links nach rechts. So schlägt #header den Selektor .menu .item, und .menu .item schlägt ul li a.

Was gewinnt, wenn zwei Selektoren dieselbe Spezifität haben?

Der, der im Stylesheet weiter unten steht. In Webflow ist das die später erstellte Klasse, weshalb die Klassenreihenfolge wichtig ist und die Finsweet-Erweiterung sie umsortieren kann.

Überschreibt !important die Spezifität?

Ja, eine !important-Deklaration schlägt normale Deklarationen und ist das Einzige, was einen Inline-Style überschreiben kann. Setze sie nur als letzten Ausweg ein, denn sie macht dein CSS deutlich schwerer zu debuggen.