Verwenden der benutzerdefinierten Eigenschaft 'Stapel', um die Kaskade zu zähmen

CSS benutzerdefinierte Eigenschaften: Neue Möglichkeiten zur Kontrolle von Kaskaden und Vererbung

Seit der Geburt von CSS im Jahr 1994 haben Kaskaden und Erbschaft definiert, wie wir auf Webseiten entwerfen. Beide sind leistungsstarke Merkmale, aber als Entwickler haben wir eine sehr begrenzte Kontrolle darüber, wie sie interagieren. Selektorspezifität und Quellcode -Reihenfolge bieten eine minimale "hierarchische" Kontrolle, aber es fehlen Nuancen - und die Vererbung erfordert eine ungebrochene Linie . Mit CSS -benutzerdefinierten Eigenschaften können wir das Kaskadieren und Vererbung auf neue Weise verwalten und steuern.

In diesem Artikel wird angezeigt, wie Sie eine benutzerdefinierte Eigenschaft "Stack" verwenden, um einige häufige Probleme bei der Kaskadierung zu lösen: von Scoped -Komponenten -Stilen bis hin zu expliziteren Absichtenhierarchie.

Erfahren Sie schnell über benutzerdefinierte Eigenschaften

Der Browser verwendet ein Anbieterpräfix (wie -Webkit- oder -moz-), um neue Eigenschaften auf die gleiche Weise zu definieren, und wir können das "leere" verwenden -Präfix, um unsere eigenen benutzerdefinierten Eigenschaften zu definieren. Wie Variablen in Sass oder JavaScript können wir sie verwenden, um Werte zu benennen, zu speichern und abzurufen - aber wie andere Eigenschaften in CSS, sie kaskadieren und mit dem DOM geerbt .

 <code>/* 定义自定义属性*/ html { --brand-color: rebeccapurple; }</code>

Um auf diese erfassten Werte zuzugreifen, verwenden wir die Funktion var (). Es hat zwei Teile: zuerst den Namen der benutzerdefinierten Eigenschaft und dann der Fallback -Wert, wenn die Eigenschaft nicht definiert ist:

 <code>button { /* 如果可用，则使用--brand-color，否则回退到deeppink */ background: var(--brand-color, deeppink); }</code>

Dies ist kein Unterstützung von älteren Browsern. Wenn der Browser die benutzerdefinierten Eigenschaften nicht versteht, ignoriert er die gesamte Var () -DEklaration. Stattdessen ist dies ein integrierter Weg, um mit undefinierten Variablen umzugehen, ähnlich wie der Schriftstapel, der eine Fallback-Schriftfamilie definiert, wenn die Schriftart nicht verfügbar ist. Wenn wir keine Fallback -Werte liefern, wird der Standard nicht festgelegt.

Bauen Sie Variable "Stack" auf

Diese Fähigkeit, Fallback-Werte zu definieren, ähnelt dem "Schriftart", der in der Schriftfamilie verwendet wird. Wenn die erste Serie nicht verfügbar ist, wird die zweite Serie verwendet und so weiter. Die Funktion var () akzeptiert nur einen einzelnen Fallback -Wert, aber wir können die Funktion var () nisten, um einen benutzerdefinierten Attribut -Fallback -Stapel einer beliebigen Größe zu erstellen:

 <code>button { /* 尝试Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 尝试--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

Wenn die verschachtelte Syntax zum Stapeln von Eigenschaften sperrig aussieht, können Sie einen Präprozessor wie SASS verwenden, um ihn kompakter zu machen.

Eine einzelne Fallback -Wertgrenze ist erforderlich, um Fallback -Werte zu unterstützen, die Kommas enthalten - z. B. Schriftstapel oder hierarchische Hintergrundbilder:

 <code>html { /* 后备值为"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

Definieren Sie "Umfang"

Mit dem CSS -Selektor können wir in einen bestimmten verschachtelten Kontext in die HTML -DOM -Baum- und Stilelemente eintauchen.

 <code>/* 所有链接*/ a { color: slateblue; } /* section 内的链接*/ section a { color: rebeccapurple; } /* article 内的链接*/ article a { color: deeppink; }</code>

Dies ist nützlich, erfasst jedoch nicht die Realität von "modularen" objektorientierten oder komponentenorientierten Stilen. Möglicherweise haben wir viele Artikel und Abschnitte, die in verschiedenen Konfigurationen verschachtelt sind. Wir brauchen einen Weg, um zu klären, welcher Kontext oder Umfang Vorrang haben sollte, wenn sie sich überschneiden.

Proximity -Umfang

Angenommen, wir haben ein. Light -Thema und ein .dark -Thema. Wir können diese Klassen im Stammelement verwenden, um die Seitenweiten-Standardwerte zu definieren, aber wir können sie auch auf bestimmte Komponenten anwenden, die auf verschiedene Arten verschachtelt sind:

Jedes Mal, wenn wir eine der Farbmusterklassen anwenden, werden die Hintergrund- und Farbeigenschaften zurückgesetzt und dann durch die verschachtelten Titel und Absätze geerbt. In unserem Hauptkontext erben die Farben aus der Klasse. Die Vererbung basiert auf direkter Blutlinie, sodass der nächste Vorfahren mit definierten Werten Vorrang hat. Wir nennen es die Nähe .

Die Nähe ist wichtig für die Vererbung, hat jedoch keinen Einfluss auf die Selektoren, die auf Spezifität beruhen. Dies wird zu einem Problem, wenn wir etwas im inneren dunklen oder hellen Behälter stylen wollen.

Hier versuche ich, helle und dunkle Knopfvarianten zu definieren. Die Light -Modus -Schaltflächen sollten Rebeccapurple mit weißem Text sein, damit sie hervorstechen, während die Tasten des Dark -Modus mit schwarzem Text Pflaumen sein sollten. Wir wählen die Tasten direkt basierend auf den hellen und dunklen Kontexten aus, aber dies funktioniert nicht:

Einige Schaltflächen sind in beiden Kontexten, mit .Light- und .dark -Vorfahren. In diesem Fall wollen wir, dass das jüngste Thema übernimmt (Erben des Näherungsverhaltens ), aber wir erhalten der zweite Selektor, der den ersten Selektor (Kaskadenverhalten) überschreibt. Da diese beiden Selektoren die gleiche Spezifität haben, bestimmt die Reihenfolge des Quellcodes den Gewinner.

Benutzerdefinierte Eigenschaften und Nähe

Wir brauchen eine Möglichkeit, diese Eigenschaften aus dem Thema zu erben , wenden sie jedoch nur auf bestimmte Kinderelemente wie unsere Schaltflächen an. Benutzerdefinierte Eigenschaften ermöglichen dies! Wir können Werte für helle und dunkle Behälter definieren, aber nur ihre erblichen Werte für verschachtelte Elemente wie unsere Schaltflächen verwenden.

Wir setzen zuerst die Schaltfläche so ein, dass benutzerdefinierte Eigenschaften verwendet werden und fallback "Standard" -Werte verwendet werden, falls diese Eigenschaften undefiniert sind:

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

Jetzt können wir diese Werte basierend auf dem Kontext festlegen, sie werden den entsprechenden Vorfahren gemäß der Nähe und Erbschaft gründen :

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

Als zusätzlicher Bonus verwenden wir insgesamt weniger Code sowie eine einheitliche Taste -Definition:

Ich denke, dies ist eine API, um verfügbare Parameter für die Tastekomponente zu erstellen. Sowohl Sara Soueidan als auch Lea Verou haben dies in jüngsten Artikeln sehr gut behandelt.

Komponentenbesitz

Manchmal reicht die Nähe nicht aus, um den Umfang zu definieren. Wenn JavaScript -Frameworks "Scope -Stile" generieren, stellen sie das Eigentum bestimmter Objektelemente fest. Die Tab -Layout -Komponente hat die Registerkarte selbst, hat jedoch nicht den Inhalt hinter jeder Registerkarte. Dies ist auch das, was die BEM -Konvention in komplexen. Block__element -Klassennamen erfassen versucht.

Nicole Sullivan prägte 2011 den Begriff „Donut Scope“, um dieses Problem zu erörtern. Obwohl ich glaube, dass sie Ideen zu diesem Thema aktualisiert hat, hat sich das grundlegende Problem nicht geändert. Selektoren und Spezifität sind großartig, um zu beschreiben, wie wir detaillierte Stile auf einem breiten Muster erstellen, vermitteln jedoch kein klares Eigentumsgefühl.

Wir können einen benutzerdefinierten Eigenschaftsstapel verwenden, um dieses Problem zu lösen. Wir werden zunächst "globale" Eigenschaften auf dem Element erstellen, die für unsere Standardfarben verwendet werden:

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

Jetzt können wir es überall verwenden, wo wir es verweisen möchten. Wir werden die Daten-Themen-Eigenschaft verwenden, um unsere Vordergrund- und Hintergrundfarben anzuwenden. Wir möchten, dass der globale Wert den Standard -Fallback -Wert liefert, aber wir möchten auch die Option, ihn mit einem bestimmten Thema zu überschreiben. Hier kommt der "Stack" ins Spiel:

 <code>[data-theme] { /* 如果没有组件值，则使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

Jetzt können wir die umgekehrte Komponente definieren, indem wir die Eigenschaft von *-Komponenten auf die Rückseite der globalen Eigenschaft einstellen:

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

Wir möchten jedoch nicht, dass diese Einstellungen aus dem Eigentümer -Donut erben. Daher setzen wir diese Werte in jedem Thema auf die erste (undefinierte) zurück. Wir müssen dies in einer niedrigeren Spezifität oder früheren Quellcode -Reihenfolge tun, damit es Standardwerte bereitstellt, die jedes Thema überschreiben kann:

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

Das anfängliche Schlüsselwort hat eine besondere Bedeutung, wenn sie für benutzerdefinierte Eigenschaften verwendet werden und es in den garantierten Zustand zurückkehren. Dies bedeutet, dass es nicht an den festen Hintergrund übergeben wird: Initial oder Farbe: Initial, die benutzerdefinierte Eigenschaft wird undefiniert und wir werden auf den nächsten Wert im Stapel zurückgreifen, d. H. Die globalen Einstellungen.

Wir können dasselbe mit der Taste tun und dann sicherstellen, dass das Datenthema auf jede Komponente angewendet wird. Wenn kein spezifisches Thema angegeben ist, standardisch für jede Komponente zum globalen Thema:

Definieren Sie "Quelle"

Eine CSS -Kaskade ist eine Reihe von Filterschichten, mit denen festgestellt wird, welcher Wert bei der Definition mehrerer Werte in derselben Eigenschaft bevorzugt werden sollte. Wir interagieren am häufigsten mit bestimmten Ebenen oder der endgültigen Hierarchie basierend auf der Quellcodesequenz - aber die erste Schicht der Kaskade ist die "Quelle" des Stils. Quelle beschreibt die Quelle des Stils - normalerweise den Browser (Standard), Benutzer (Präferenz) oder Autor (US).

Standardmäßig überschreibt der Autorenstil Benutzerpräferenzen und Benutzereinstellungen überschreiben Browser -Standardeinstellungen. Dies ändert sich !important , und die Quelle ist umgekehrt: Der Browser !important Stil hat die höchste Quelle, dann die wichtigen Benutzerpräferenzen, dann unser Autor wichtige Stile, vor allem normale Ebenen. Es gibt einige andere Quellen, aber wir werden hier nicht auf Details eingehen.

Wenn wir eine benutzerdefinierte Eigenschaft "Stack" erstellen, bauen wir ein sehr ähnliches Verhalten auf. Wenn wir eine vorhandene Quelle als benutzerdefinierte Eigenschaftsstapel darstellen möchten, sieht sie so aus:

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

Diese Schichten existieren bereits, daher gibt es keinen Grund, sie neu zu erstellen. Wenn wir jedoch über unser "globales" und "Komponenten" -Stile oben geschoben werden, tun wir etwas Ähnliches und erstellen eine "Komponenten" -Er -Quellebene, die unsere "globale" Ebene überschreibt. Die gleiche Methode kann verwendet werden, um verschiedene hierarchische Probleme in CSS zu lösen, die nicht immer mit Spezifität beschrieben werden können:

• Überschreiben »Komponenten» Thema »Standardwerte
• Thema »Entwerfen Sie ein System oder ein Framework
• Status »Typ» Standardwert

Schauen wir uns noch einige Tasten an. Wir benötigen einen Standard -Schaltflächenstil, einen behinderten Status und verschiedene Tastentypen "wie Gefahr, primär und sekundär. Wir möchten, dass der behinderte Zustand die Typvariante immer überschreibt, aber der Selektor kann diesen Unterschied nicht erfassen:

Wir können jedoch einen Stapel definieren, der die "Typ" und "Status" in der Reihenfolge liefert, die wir Prioritäten setzen möchten:

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

Wenn wir nun zwei Variablen festlegen, wird der Zustand immer Vorrang haben:

Ich habe ein Cascading -Farb -Framework mit dieser Technik erstellt, mit der benutzerdefinierte Themeneinstellungen basierend auf Layering:

• Vordefinierte Themeneigenschaften in HTML
• Benutzerfarbeinstellungen
• Helle und dunkle Modi
• Globales Thema Standardeinstellungen

Mischen und übereinstimmen

Diese Methoden können extrem sein, aber die meisten täglichen Anwendungsfälle können mit zwei oder drei Werten im Stapel verarbeitet werden, normalerweise unter Verwendung der oben genannten Techniken:

• Definieren Sie den variablen Stapel der Schicht
• Die Vererbung basiert auf Nähe und Umfang
• Wenden Sie die Anfangswerte sorgfältig an, um verschachtelte Elemente aus dem Umfang zu entfernen

Wir haben diese benutzerdefinierten Eigenschaften "Stack" in unseren Oddbird -Projekten verwendet. Wir erforschen immer noch, aber sie haben uns geholfen, Probleme zu lösen, die mit nur Selektoren und Spezifität schwer zu lösen sind. Mit benutzerdefinierten Eigenschaften müssen wir keine Cascade oder Erbschaft bekämpfen. Wir können sie wie erwartet erfassen und nutzen und haben eine bessere Kontrolle darüber, wie sie in jedem Fall angewendet werden. Für mich ist dies ein großer Gewinn für CSS - insbesondere bei der Entwicklung von Stilrahmen, Tools und Systemen .

Das obige ist der detaillierte Inhalt vonVerwenden der benutzerdefinierten Eigenschaft 'Stapel', um die Kaskade zu zähmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!