CSS-Variablen (offiziell Custom Properties genannt) sind eine browsereigene Funktion, mit der du einen Wert einmal definierst und im gesamten Stylesheet wiederverwendest. Sie zentralisieren Werte wie Farben, Abstände und Schriftarten, ohne dass du einen Präprozessor wie Sass brauchst – und das Beste ist, dass sie sich zur Laufzeit per JavaScript ändern lassen. In diesem Artikel richten wir CSS-Variablen von Grund auf ein, bauen ein echtes Hell-/Dunkel-Theme und behandeln Muster, die du täglich brauchst.
Was sind CSS-Variablen genau?
Eine Custom Property besteht aus einem Namen, der mit -- beginnt, und einem Wert. Zum Auslesen verwendest du die Funktion var(). Der gängigste Ansatz ist, die Variablen am :root-Selektor zu deklarieren, denn :root zielt auf das Wurzelelement des Dokuments (<html>), und dort definierte Variablen sind auf der ganzen Seite verfügbar.
:root {
--farbe-primaer: #6c5ce7;
--farbe-text: #1a1a1a;
--abstand: 16px;
}
.button {
background: var(--farbe-primaer);
color: white;
padding: var(--abstand);
}Willst du nun die Primärfarbe ändern, passt du eine einzige Zeile an, und die Dutzenden Regeln, die davon abhängen, aktualisieren sich automatisch. Anders als bei klassischen hartcodierten Werten hast du eine einzige Quelle der Wahrheit.
var() und Fallback-Werte
var() kann ein zweites Argument aufnehmen: einen Fallback-Wert. Ist die Variable undefiniert oder ungültig, greift der Fallback. Das ist nützlich, um sicher auf eine noch nicht definierte Variable zuzugreifen:
.karte {
/* weiß wird verwendet, wenn --karte-bg undefiniert ist */
background: var(--karte-bg, #ffffff);
border-radius: var(--karte-radius, 8px);
}Der Fallback umfasst alles nach dem Komma, daher kann sogar ein weiteres var() als Fallback dienen: var(--a, var(--b, red)).
Vererbung und Geltungsbereich
Die stärkste Eigenschaft von CSS-Variablen ist, dass sie der normalen CSS-Vererbung folgen. Definierst du eine Variable an einem bestimmten Element, sehen nur dieses Element und seine Nachfahren den Wert. Das macht komponentenbezogenes Theming einfach:
.hinweis {
--farbe-akzent: #e17055;
}
.hinweis .titel {
color: var(--farbe-akzent); /* orange */
}Du kannst dieselbe Variable --farbe-akzent in verschiedenen Containern mit unterschiedlichen Werten definieren und das Aussehen der darin enthaltenen gemeinsamen Komponenten mit einer einzigen Zeile ändern. Das kannst du mit Sass-Variablen nicht, denn diese werden zur Kompilierzeit aufgelöst und kennen weder Geltungsbereich noch Vererbung.
Praxisbeispiel: Hell-/Dunkel-Theme
Der häufigste Einsatz von CSS-Variablen ist der Theme-Wechsel. Du verlagerst deine Farben in Variablen und überschreibst die Werte dann anhand eines data-theme-Attributs an <html>:
:root {
--bg: #ffffff;
--text: #1a1a1a;
--karte: #f5f5f7;
}
[data-theme="dark"] {
--bg: #0f0f12;
--text: #f2f2f5;
--karte: #1c1c22;
}
body { background: var(--bg); color: var(--text); }
.karte { background: var(--karte); }Den Wechsel per JavaScript auszulösen, ist eine Sache weniger Zeilen:
const btn = document.querySelector('#theme-umschalten');
btn.addEventListener('click', () => {
const html = document.documentElement;
const naechstes = html.dataset.theme === 'dark' ? 'light' : 'dark';
html.dataset.theme = naechstes;
localStorage.setItem('theme', naechstes);
});Ein Hinweis: Soll die ganze Seite auf einmal umschalten, ist es ratsam, deine Übergangs-Animationen während des Wechsels vorübergehend zu deaktivieren; sonst versucht der Browser, Hunderte Elemente gleichzeitig zu überblenden, was träge wirken kann.
Variablen mit JavaScript lesen und schreiben
Custom Properties lassen sich über das DOM lesen und schreiben. Das ist mächtig, um dynamische Stile abhängig von Scrollposition, Mausbewegung oder Benutzereingabe zu erzeugen:
const root = document.documentElement;
// Schreiben
root.style.setProperty('--farbe-primaer', '#00b894');
// Lesen
const wert = getComputedStyle(root)
.getPropertyValue('--farbe-primaer')
.trim();Du kannst zum Beispiel die Mausposition in eine Variable schreiben und allein mit CSS einen Glow-Effekt bauen. Die Logik bleibt in JavaScript, während das Visuelle vollständig in CSS lebt – das hält den Code sauber.
Bewährte Praktiken und Fallstricke
- Verwende aussagekräftige Namen. Rollenbasierte Namen wie
--farbe-primaersind wartbarer als wertbasierte wie--lila, weil der Name auch dann sinnvoll bleibt, wenn sich der Wert ändert. - Gruppiere deine Design-Tokens. Fasse Gruppen wie Farben, Abstände, Radien und Schatten in logischen Blöcken innerhalb von
:rootzusammen. - Sie sind groß-/kleinschreibungsabhängig.
--Farbeund--farbesind unterschiedliche Variablen. - Sie halten Werte, keine Selektoren. Du kannst einer Variable nur einen Wert (Farbe, Zahl, Länge) zuweisen, keine vollständige CSS-Regel.
- Die Browserunterstützung ist breit. Alle modernen Browser unterstützen sie seit Jahren; nur sehr alte Internet-Explorer-Versionen nicht.
Häufige Fragen
Was ist der Unterschied zwischen CSS-Variablen und Sass-Variablen?
Sass-Variablen ($farbe) werden zur Kompilierzeit aufgelöst und erscheinen nicht im finalen CSS; sie sind statisch. CSS-Variablen (--farbe) bleiben im Browser lebendig, respektieren die Vererbung und lassen sich zur Laufzeit per JavaScript ändern. Für dynamische Szenarien wie Theming sind CSS-Variablen weit besser geeignet.
Kann ich Media Queries mit Custom Properties verwenden?
Ja. Indem du eine Variable innerhalb eines @media-Blocks neu definierst, kannst du responsive Werte erzeugen; zum Beispiel --abstand: 32px auf breiten Bildschirmen und --abstand: 16px auf Mobilgeräten. Jede Komponente, die diese Variable nutzt, passt sich automatisch an.
Was passiert, wenn eine Variable einen ungültigen Wert erhält?
Die betroffene Eigenschaft wird als ungültig zum Berechnungszeitpunkt markiert, und stattdessen wird der vererbte oder der Anfangswert der Eigenschaft verwendet. Deshalb ist es eine sichere Wahl, an kritischen Stellen einen var()-Fallback hinzuzufügen.
Möchtest du ein sauberes, skalierbares Design-System in deinem Projekt? Ich helfe dir, mit CSS-Variablen eine wartbare, theme-fähige Oberfläche zu bauen. Nimm Kontakt auf und lass uns über dein Projekt sprechen.