CSS-Variablen: Flexibles Styling für deine Komponenten 🎨

CSS hat sich in den letzten Jahren mächtig weiterentwickelt. Früher waren Stylesheets oft ein endloses Kopieren und Einfügen gleicher Farben, Schriftgrößen oder Abstände. Das machte die Pflege riesiger Projekte zum Albtraum. Doch seitdem CSS Custom Properties – besser bekannt als CSS-Variablen – verfügbar sind, ist dieses Chaos Geschichte.

Du kannst mit CSS-Variablen nicht nur deinen Code strukturierter und wartbarer machen, sondern auch komplexe Komponenten dynamisch und flexibel stylen, ohne ständig Klassen oder Selektoren ändern zu müssen. In diesem Artikel zeige ich dir Schritt für Schritt, wie du CSS-Variablen nutzt, welche Vorteile sie haben und wie du sie sogar in Komponenten scoped verwenden kannst.

Was sind CSS-Variablen? 🤔

CSS-Variablen sind benannte Werte, die du innerhalb deiner Stylesheets definieren kannst. Im Gegensatz zu präprozessorbasierten Variablen (wie bei SASS oder LESS) sind CSS-Variablen zur Laufzeit verfügbar und reagieren auf den Kontext, in dem sie verwendet werden.

Eine CSS-Variable wird immer mit zwei Bindestrichen definiert:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

Du kannst die Variable dann überall im CSS mit var() aufrufen:

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

Wichtig: CSS-Variablen sind Teil des DOM und können sogar über JavaScript zur Laufzeit geändert werden.

Die Vorteile von CSS-Variablen 🚀

Warum solltest du CSS-Variablen nutzen? Hier die wichtigsten Gründe:

• Wiederverwendbarkeit: Farben, Größen und Abstände müssen nicht mehrfach im CSS stehen.
• Leichtere Wartung: Änderungen an einer zentralen Variable wirken sich auf alle Elemente aus.
• Dynamik: Du kannst Variablen im JavaScript zur Laufzeit anpassen.
• Scoping: Variablen können global oder lokal innerhalb eines Selektors definiert werden.
• Bessere Performance: Anders als bei SASS musst du nicht bei jeder Änderung neu kompilieren.

So verwendest du CSS-Variablen im Projekt ✏️

Die einfachste Möglichkeit ist, deine Variablen im globalen Kontext zu definieren:

:root {
  --font-size: 18px;
  --border-radius: 8px;
}

Dann nutzt du sie in beliebigen Elementen:

.card {
  font-size: var(--font-size);
  border-radius: var(--border-radius);
}

Wenn du in JavaScript dynamisch darauf zugreifen möchtest, funktioniert das so:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Scoped Variablen: Variablen lokal überschreiben 🪄

Der wahre Gamechanger ist die Möglichkeit, Variablen innerhalb von Komponenten zu überschreiben. Du kannst eine globale Variable definieren und sie innerhalb eines Elements oder einer Komponente neu setzen:

:root {
  --button-bg: #3498db;
}

.button {
  background-color: var(--button-bg);
}

.button.secondary {
  --button-bg: #2ecc71;
}

Die Klasse .button.secondary wird dadurch automatisch grün, ohne dass du die Hintergrundfarbe manuell ändern musst.

Komponenten dynamisch stylen mit CSS-Variablen 🧩

Gerade bei wiederverwendbaren Komponenten wie Buttons, Cards oder Modals bieten CSS-Variablen eine enorme Flexibilität. Du kannst pro Komponente eigene Variablen setzen, die sich je nach Kontext ändern:

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

.card.small {
  --card-padding: 10px;
}

Das funktioniert sogar verschachtelt:

.theme-dark {
  --background: #222;
  --text-color: #eee;
}

.theme-light {
  --background: #fff;
  --text-color: #000;
}

body {
  background: var(--background);
  color: var(--text-color);
}

So kannst du z. B. Themes oder Modus-Wechsel sehr leicht implementieren, ohne eine einzige Klasse in deinem HTML zu verändern.

Fallbacks und Besonderheiten 🧩

Du kannst Variablen auch mit einem Fallback versehen:

.title {
  color: var(--title-color, #333);
}

Wenn --title-color nicht definiert ist, wird #333 genutzt. Praktisch für ältere Browser oder wenn du bewusst optional Werte zulassen willst.

Achtung: CSS-Variablen funktionieren nicht in Internet Explorer. Alle modernen Browser unterstützen sie jedoch (siehe Can I use).

Warum nicht einfach SASS oder LESS? 🤨

Früher hast du vielleicht Variablen mit SASS oder LESS geschrieben. Das Problem: Diese Variablen existieren nur zur Kompilierzeit. In deinem finalen CSS gibt es sie nicht mehr – du kannst sie also nicht zur Laufzeit ändern oder überschreiben.

Mit CSS-Variablen hingegen kannst du:

• Dynamische Themes bauen
• Elemente basierend auf Benutzerinteraktion live anpassen
• Styling kontextabhängig machen (z. B. in einem Modal andere Farben)

Praxisbeispiel: Farbthemen per CSS-Variable 🧩

Ein einfaches Dark/Light-Mode Beispiel:

:root {
  --bg-color: #fff;
  --text-color: #000;
}

[data-theme="dark"] {
  --bg-color: #000;
  --text-color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Mit JavaScript kannst du den Modus umschalten:

document.documentElement.setAttribute('data-theme', 'dark');

Ohne eine Zeile zusätzliches CSS ändern zu müssen. Das war früher mit SASS unmöglich.

Fazit 🎯

CSS-Variablen sind eines der unterschätztesten Features in modernen Stylesheets. Sie bringen nicht nur Struktur und Lesbarkeit in dein CSS, sondern ermöglichen flexible Komponenten, dynamische Themes und eine zentrale Steuerung deiner Styles. Gerade für größere Projekte sparst du langfristig extrem viel Zeit und vermeidest unnötige Code-Duplikate.

Wenn du CSS-Variablen bisher noch nicht genutzt hast – probier es aus! Du wirst dich fragen, warum du so lange darauf verzichtet hast.

Hast du schon CSS-Variablen in deinem Projekt genutzt oder planst du, es jetzt zu tun? Schreib mir gerne in die Kommentare, wie du sie einsetzen willst oder wo du noch Fragen hast!