CSS Custom Properties: Dynamische Theming
CSS Custom Properties (auch CSS Variables genannt) ermöglichen es, Werte in CSS zu definieren und wiederzuverwenden. Sie sind mächtiger als traditionelle CSS-Präprozessor-Variablen, weil sie zur Laufzeit geändert werden können und Kaskadierung unterstützen. Custom Properties sind essentiell für moderne Theming-Systeme, Dark Mode, und dynamische Styles.
Custom Properties werden mit -- Präfix definiert und mit var() verwendet. Sie erben von Parent-Elementen und können zur Laufzeit geändert werden, was sie ideal für Theming macht. Im Gegensatz zu Sass- oder Less-Variablen, die zur Compile-Zeit verarbeitet werden, sind Custom Properties echte CSS-Werte, die zur Laufzeit manipuliert werden können.
Die Syntax ist einfach: --variable-name: value; definiert eine Variable, var(--variable-name) verwendet sie. Fallback-Werte können mit var(--variable-name, fallback) angegeben werden. Custom Properties können für jeden CSS-Wert verwendet werden - Farben, Größen, Spacing, oder komplexe Werte.
Theming mit Custom Properties
Custom Properties sind ideal für Theming. Statt verschiedene CSS-Klassen für verschiedene Themes zu haben, können Sie Custom Properties verwenden und Themes durch Ändern der Variablen-Werte wechseln. Dies macht Theming einfacher und wartbarer.
Ein typisches Theming-Setup definiert Custom Properties im :root Element für das Standard-Theme. Für alternative Themes (z.B. Dark Mode) werden die Variablen-Werte überschrieben. Ein Theme-Wechsel kann durch Ändern einer Klasse oder eines Data-Attributes erfolgen.
css
:root {
--primary-color: #007bff;
--background-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--primary-color: #0d6efd;
--background-color: #212529;
--text-color: #ffffff;
}Design Tokens
Custom Properties sind ideal für Design Tokens - zentrale Werte, die das gesamte Design-System definieren. Farben, Spacing, Typography, oder andere Design-Werte können als Custom Properties definiert werden, was Konsistenz sicherstellt.
Design Tokens sollten semantisch benannt werden - --color-primary statt --color-blue. Semantische Namen machen es einfacher, das gesamte Design-System zu ändern, ohne Code zu ändern. Wenn sich die Markenfarbe ändert, müssen nur die Token-Werte aktualisiert werden.
Kaskadierung und Vererbung
Custom Properties erben von Parent-Elementen und folgen der CSS-Kaskade. Dies ermöglicht es, Variablen auf verschiedenen Ebenen zu überschreiben. Ein Theme kann auf :root definiert werden, aber spezifische Komponenten können ihre eigenen Variablen-Werte haben.
Die Kaskadierung macht Custom Properties mächtig für Komponenten-basierte Architekturen. Eine Komponente kann ihre eigenen Variablen definieren, die von Parent-Variablen erben, aber überschrieben werden können.
Runtime-Änderungen
Custom Properties können zur Laufzeit mit JavaScript geändert werden. document.documentElement.style.setProperty('--variable-name', 'value') ändert eine Variable. Dies ermöglicht dynamische Theming, User-Präferenzen, oder interaktive Styles.
Runtime-Änderungen sind mächtig für Features wie User-konfigurierbare Themes, dynamische Farbanpassungen, oder responsive Design-Anpassungen. Custom Properties machen solche Features einfacher als traditionelle CSS-Ansätze.
Fallback-Werte
Custom Properties unterstützen Fallback-Werte mit var(--variable-name, fallback). Wenn eine Variable nicht definiert ist, wird der Fallback-Wert verwendet. Dies ist wichtig für Browser-Kompatibilität oder wenn Variablen optional sind.
Fallback-Werte sollten sinnvoll sein - nicht nur technische Fallbacks, sondern auch semantische. Ein Fallback sollte das Design nicht brechen, wenn eine Variable fehlt.
Best Practices
Semantische Namen:
Verwenden Sie semantische Namen für Custom Properties - --color-primary statt --color-blue. Semantische Namen machen Code wartbarer.
Struktur:
Organisieren Sie Custom Properties logisch. Gruppieren Sie verwandte Variablen zusammen - alle Farben, alle Spacing-Werte, etc.
Dokumentation:
Dokumentieren Sie Custom Properties. Welche Variablen sind verfügbar? Welche Werte sind erlaubt? Dokumentation hilft Teams.
Browser-Support:
Custom Properties haben guten Browser-Support, aber sehr alte Browser unterstützen sie nicht. Fallback-Werte sind wichtig für Kompatibilität.
Kommentare