CSS-Spezifität

Intro

Die CSS-Spezifität bestimmt, welche CSS-Eigenschaftswerte für ein Element am wichtigsten sind. Wenn ein Element zwei CSS-Eigenschaftswerte hat, gewinnt derjenige mit der höheren Spezifität, und sein Eigenschaftswert wird auf das Element angewendet.

CSS-Spezifität ist kein Client-First spezifisches Problem. Es ist kein Problem, das von Client-First geschaffen wird. Es geht darum, wie CSS funktioniert.

Das für das Client-First wichtigste Prinzip ist das der Spezifität: Klassen, die dem CSS zuletzt hinzugefügt wurden, "gewinnen", wenn es Konflikte mit CSS-Eigenschaftswerten gibt.

Wir werden anhand eines Beispiels in Client-First lernen, wie es funktioniert. Beim Hinzufügen von Client-First Stilen zu einem Projekt gibt es ein häufiges Problem im Arbeitsablauf.

Wenn wir die Client-First-Klassen für _Margin und _Padding in der falschen Reihenfolge in ein anderes Projekt kopieren, werden die Klassen nicht wie erwartet funktionieren.

Beispiel für Client-First Spacing

Wann funktioniert das Spacing NICHT?

Wir fügen das _Spacing aus unserem offiziellen Starter-Projekt in ein anderes Projekt ein, indem wir die folgenden Schritte ausführen:

1. Gehe im Startprojekt zur Seite Style-Guide und öffne den Navigator.
2. Kopiere den "Ordner" fs-styleguide_spacing-directions und füge ihn in das neue Projekt ein.
3. Kopiere dann den "Ordner" fs-styleguide_spacing-sizes und füge ihn in das neue Projekt ein.

Die Klassen für _Margin sollten nach dem Kopieren aller Klassen in das Projekt einsatzbereit sein. Das _Spacing funktioniert jedoch nicht in dieser Reihenfolge.

Alles funktioniert wie erwartet, wenn wir der Seite einen neuen Div Block hinzufügen und margin-bottom auf ihn anwenden.

Wenn wir margin-large hinzufügen, erwarten wir, dass ein großer Abstand an der Oberseite angewendet wird.

Allerdings wird an allen Seiten ein großer Abstand hinzugefügt. Das ist nicht beabsichtigt.

Wir können das Spacing in Client-First so nicht verwenden.

Warum funktioniert dieses Beispiel nicht? CSS-Spezifität.

Die Größenklassen wurden dem Projekt nach den Richtungsklassen hinzugefügt. Aus diesem Grund sind die Größenklassen spezifischer für die Besonderheiten des Projekts.

margin-top wurde zuerst zum Webflow-Projekt hinzugefügt, dann margin-large.

Wenn wir Stile in Webflow erstellen, werden die Stile im CSS in der Reihenfolge generiert, in der sie im Webflow-Projekt erstellt wurden.

Ein Prinzip der CSS-Spezifität ist die "Reihenfolge der Erstellung".

Nach den Regeln der CSS-Spezifität ist eine Klasse, die weiter unten (später) im CSS erstellt wird, spezifischer für die Website als die Stile, die weiter oben (früher) im CSS erstellt werden.

Eine später in unserem Webflow-Projekt erstellte Klasse (margin-large) hat eine höhere Priorität als die früher in unserem Webflow-Projekt erstellte Klasse (margin-top).

Wenn auf diese beiden Klassen die gleiche CSS-Eigenschaft (margin) angewendet wird, gewinnt die Klasse mit der höheren Priorität, und die Deklaration der Stileigenschaft dieser Klasse wird auf das Element angewendet.

margin-large hat eine höhere Priorität als margin-top, so dass es die Stile von margin-top überschreibt. margin-large hat an allen Seiten einen Abstand. Diese Stile haben Vorrang und überschreiben die 0rem unserer Klasse margin-top.

Wir brauchen die Klasse margin-top, um margin-large auf allen Seiten zu überschreiben. Wir müssen die Reihenfolge der Erstellung ändern, damit das _Spacing funktioniert.

Wann wird das Spacing funktionieren?

1. Client-First-Starterprojekt (empfohlen)

Wenn wir das offizielle Client-First-Starterprojekt verwenden, werden die Abstandsklassen in der richtigen Reihenfolge erstellt. Wir müssen uns keine Sorgen machen, dass das obige Beispiel in unserem Projekt vorkommt.

2. Finsweet Extension > Client-First

Mit der _{Finsweet Extension} können wir das komplette Client-First-Spacing-System kopieren – ohne Probleme mit der CSS-Spezifität. margin-[size]-Klassen werden automatisch zuerst zum Projekt hinzugefügt und margin-[direction]-Klassen automatisch als zweites.

3. Dieser Arbeitsablauf

Wir fügen das _Spacing aus unserem offiziellen Client-First-Starterprojekt in ein anderes Projekt ein, indem wir die folgenden Schritte ausführen:

1. Gehe im Starterprojekt auf die Style-Guide Seite und öffne den Navigator.
2. Öffne im Navigator fs-styleguide_classes > fs-styleguide_spacing-all
3. Kopiere den "Ordner" fs-styleguide_spacing-sizes und füge ihn in das neue Projekt ein.
4. Kopiere dann den "Ordner" fs-styleguide_spacing-directions und füge ihn in das neue Projekt ein.

Wenn wir jetzt einen neuen _{Div Block} auf der Seite hinzufügen, margin-bottom darauf anwenden und dann margin-large oben anwenden, funktioniert es.

Der margin-bottom wird nur auf die obere Seite des _{Div Blocks} angewendet.

CSS-Spezifität "display: none" Beispiel

Denke daran, dass CSS-Spezifität nicht spezifisch für Client-First oder unser _Spacing ist. Wir werden ein Beispiel durchgehen, das nichts mit Abständen zu tun hat. Probleme mit CSS-Spezifität können bei jedem Webflow-Projekt auftreten.

Zuerst fügen wir eine Klasse display-none hinzu, die die Eigenschaft display auf none setzt. Wir wollen diese Klasse in unserem gesamten Projekt als _{Utility Class} verwenden, um sie überall in unserem Projekt einzusetzen.

Als Nächstes erstellen wir ein Element namens background-red, dessen Anzeige auf block und dessen background auf red eingestellt ist.

Wenn wir display-none zu background-red als ₊ hinzufügen, ist unser erster Gedanke, dass background-red  auf display: none gesetzt werden sollte.

{Video}

Aufgrund der CSS-Spezifität ist dies nicht möglich. Die Eigenschaft display bei display-none wird ignoriert.

Da background-red nach display-none erstellt wurde, ist es spezifischer für das Stylesheet und das Projekt.

Die Display-Eigenschaft von background-red hat eine höhere Priorität als die Display-Eigenschaft von display-none, so dass background-red gewinnt.

Fehlerbehebung mit der Finsweet Extension

Mit der Funktion "CSS Styles Reorder" in der _{Finsweet Extension} kannst du die Klassen im CSS deines Projekts neu anordnen.

Der obige display: none Anwendungsfall ist ein hervorragendes Beispiel dafür, warum wir diese Funktion hinzugefügt haben. Mit der _{Finsweet Extension} können wir das obige Problem schnell und zuverlässig lösen.

1. Öffne die Erweiterung, wähle Candies und dann "CSS Styles Reorder".
2. Verschiebe die Klasse background-red in der Liste der Klassen vor die Klasse display-none und speichere.

{Video}

Mit dieser Aktion wird die Reihenfolge der Stile in der CSS-Datei visuell geändert. Mit diesem Tool kannst du jedes Problem mit der CSS-Spezifität der Erstellungsreihenfolge in Webflow beheben.

Jetzt steht background-red an erster Stelle und display-none an zweiter Stelle des Stylesheets. Jetzt können wir unsere Klasse display-none wie vorgesehen verwenden.

{Video}

Wenn display-none die letzte Klasse im Stylesheet ist, hat sie einen wirklich globalen Charakter. Sie kann die Eigenschaft display einer beliebigen Klasse im Projekt überschreiben.

Live-Session Video-Erklärung

Im Folgenden findest du ein Video aus einer F'in Live-Folge, das einen Großteil des Inhalts dieser Seite erklärt. Die vollständige schriftliche Seite ist eine ausführlichere Erklärung.

{Video}

Fazit und nächste Schritte

Die obigen Informationen sind nur ein kleiner Teil der CSS-Spezifität. Es ist ein komplexes Konzept mit einer Liste von vielen definierten Regeln. Oben haben wir eine dieser Regeln gelernt – die Reihenfolge der Klassen im CSS.

Um ein Profi in Webflow zu sein, muss man nicht jeden Teil der CSS-Spezifität verstehen. Wenn wir jedoch fortgeschrittene Konzepte wie dieses verstehen, bringen wir unser Webflow-Wissen auf die nächste Stufe.

Das Verständnis der CSS-Spezifität gibt uns eine tiefere Verbindung zum CSS in unserem Projekt. Je mehr wir sie verstehen, desto tiefer ist die Verbindung.

Es gibt viele Inhalte über CSS-Spezifität im Internet. Beginne mit der W3 Schools CSS Specificity Dokumentationsseite, um mehr zu erfahren.