CSS-Custom-Properties fürs Theming: Vererbung, Fallbacks und @property

Worum es geht

Eine Custom Property ist jede Deklaration, deren Name mit -- beginnt; var(--name, fallback) setzt ihren Wert in eine andere Deklaration ein. Der MDN-Leitfaden besagt, dass Custom Properties der Kaskade unterliegen und vom Elternelement erben, dass var() nur innerhalb von Eigenschaftswerten vorkommen darf (nicht in Selektoren, Eigenschaftsnamen oder in Media- und Container-Query-Bedingungen), und dass sich eine ungültige Substitution anders verhält als gewöhnliches ungültiges CSS: Statt die Deklaration zu verwerfen, verwendet der Browser den Anfangs- oder geerbten Wert der Eigenschaft. @property registriert eine Custom Property mit einer syntax, einem inherits-Flag und einem initial-value, wodurch sie typgeprüft und animierbar wird.

Warum es wichtig ist

Theming (Markenfarben, Dichte, Dark Mode, mandantenspezifisches Styling) wird zu einer Frage, eine Handvoll Eigenschaften auf einem Geltungsbereich (:root, [data-theme="dark"], einer Komponentenwurzel) neu zu definieren, statt Regeln zu duplizieren. Da die Werte in der Kaskade leben, können sie aus Inline-Styles, aus JavaScript mit style.setProperty und pro Teilbaum gesetzt werden, und jede Regel, die sie liest, aktualisiert sich sofort.

So wird es angewendet

• Zwei Ebenen definieren: rohe Tokens (--blue-600: #2563eb) und semantische Rollen (--color-accent: var(--blue-600)); Komponenten verwenden nur Rollen, Themes definieren nur Rollen neu.
• Standardwerte auf :root setzen und auf einem Geltungsbereichs-Element überschreiben; komponentenbezogene Standardwerte vermeiden, die still und heimlich zu den eigentlichen Werten werden.
• Das Fallback-Argument für Eigenschaften verwenden, die eine Host-Seite möglicherweise nicht definiert (var(--btn-bg, #333)); die var()-Seite dokumentiert verschachtelte Fallbacks.
• Eigenschaften, die animieren müssen oder typsicher sein sollen, mit @property registrieren und ihnen einen initial-value geben; unregistrierte Eigenschaften sind untypisiert und animieren diskret.
• Namen bei der Auslieferung von Komponenten mit Namensraum versehen (--acme-btn-bg); alle Custom Properties teilen sich einen Namensraum in der Kaskade.
• Einheitenlose Zahlen nur speichern, wenn jede konsumierende Stelle sie multipliziert (calc(var(--gap) * 1px)); ein Wert wird als Token eingesetzt, nicht umgerechnet.

Stolpersteine

Die Regel für ungültige Substitution ist unauffällig: color: var(--size) mit --size: 16px ergibt die geerbte Farbe, keinen Fehler, und der Fallback hilft nicht, weil die Variable definiert ist. Custom Properties können keine Media-Query-Bedingungen steuern, sodass Breakpoints wörtlich bleiben müssen. Eine auf :root definierte Eigenschaft wird von allem geerbt, was für Themes praktisch und für komponentenlokalen Zustand verwirrend ist; lokalen Zustand auf der Komponentenwurzel halten. Von JavaScript gesetzte Werte sind Strings und werden erst bei der Verwendung validiert.

Wo var() aufgelöst wird

Eine Custom Property wird auf dem Element, auf dem sie deklariert ist, zum Zeitpunkt der Berechnung des Werts substituiert, und Nachkommen erben das Ergebnis. --color-accent: var(--blue-600) auf :root wird daher als die aufgelöste Farbe vererbt, und ein Neudefinieren von --blue-600 auf [data-theme="dark"] oder einer Komponentenwurzel ändert --color-accent dort nicht; der Alias behält den auf :root berechneten Wert. Themes müssen die Rolleneigenschaften (--color-accent) in ihrem Geltungsbereich neu definieren oder die Aliase zusammen mit einer ausgetauschten Palette neu deklarieren. Das Symptom, wenn das falsch gemacht wird – ein Theme mit Geltungsbereich, dessen Farben die des Root-Elements bleiben – sieht wie ein Spezifitätsproblem aus, ist aber keines.