Seite 2 von 12
VORTEILE
✅ Flexibilität und Anpassbarkeit
- Benutzer können Werte leicht ändern ohne CSS-Kenntnisse
- Einfache Dark/Light-Mode Umschaltung:
@media (prefers-color-scheme: dark) {
:root {
--background: #1a1a1a;
--text-color: #ffffff;
}
}
✅ Wartbarkeit
- Zentrale Änderungen möglich
- Konsistente Werte über das gesamte Stylesheet
- Reduzierte Redundanz
✅ Dynamische Anpassung
- Werte können zur Laufzeit geändert werden
- JavaScript-Interaktion möglich:
javascript
document.documentElement.style.setProperty('--primary-color', '#ff0000');
✅ Browser-Support
- Moderne Browser unterstützen CSS-Variablen gut
- Fallback-Mechanismus:
color: var(--text-color, #000000); /* Fallback zu Schwarz */
✅ Kaskadierende Natur
- Variablen erben und überschreiben wie andere CSS-Eigenschaften
- Verschiedene Werte für verschiedene Kontexte