HTML & CSS

CSS Custom Properties: Variablen in CSS richtig nutzen

CSS-Variablen machen deine Stylesheets wartbarer, ermöglichen Theming und lassen sich sogar per JavaScript ändern. So setzt du Custom Properties richtig ein.

Anton

— 3 Min. Lesezeit
Teilen

Hast du in einem größeren Projekt schon einmal dieselbe Farbe an dreißig Stellen im Stylesheet wiederholt – und dann beim Rebranding jede einzelne von Hand geändert? Genau dieses Problem lösen CSS Custom Properties, oft einfach CSS-Variablen genannt. Sie sind seit Jahren in allen modernen Browsern verfügbar, brauchen keinen Präprozessor wie Sass und haben einen entscheidenden Vorteil: Sie leben zur Laufzeit im Browser und lassen sich sogar per JavaScript verändern. In diesem Beitrag lernst du, wie du sie definierst, nutzt und für Theming einsetzt.

Was sind CSS Custom Properties?

Eine Custom Property ist ein selbst definierter Wert, den du an beliebiger Stelle im CSS wiederverwenden kannst. Der Name beginnt immer mit zwei Bindestrichen (--), damit der Browser ihn von normalen CSS-Eigenschaften unterscheiden kann. Definiert werden Variablen wie jede andere Eigenschaft innerhalb eines Selektors. Sehr häufig legst du sie im Pseudo-Selektor :root an – das ist das oberste Element im Dokument (entspricht <html>), wodurch die Variable global im gesamten Projekt verfügbar wird.

:root {
  --primary-color: #2563eb;
  --text-color: #1f2937;
  --spacing: 16px;
  --font-stack: "Inter", system-ui, sans-serif;
}

Anders als bei Sass-Variablen, die beim Kompilieren durch feste Werte ersetzt werden, existieren Custom Properties im fertigen Stylesheet weiter. Der Browser wertet sie live aus – das macht sie so mächtig.

Variablen nutzen mit der var()-Funktion

Um auf eine Variable zuzugreifen, verwendest du die Funktion var(). Du übergibst ihr den Namen der Custom Property, und der Browser setzt an dieser Stelle den hinterlegten Wert ein.

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing);
  font-family: var(--font-stack);
}

.card {
  color: var(--text-color);
  margin-bottom: var(--spacing);
}

Der große Gewinn: Änderst du --primary-color an einer einzigen Stelle in :root, aktualisieren sich alle Elemente, die diese Variable verwenden, automatisch. Kein Suchen und Ersetzen mehr.

Fallback-Werte und Vererbung

var() akzeptiert ein zweites Argument: einen Fallback-Wert. Er greift, falls die Variable nicht definiert ist. Das ist nützlich für optionale Werte oder robuste Komponenten.

.badge {
  /* Falls --badge-color fehlt, wird Grau verwendet */
  background-color: var(--badge-color, #6b7280);
  border-radius: var(--badge-radius, 4px);
}

Custom Properties folgen außerdem der normalen CSS-Vererbung. Definierst du eine Variable nicht global, sondern auf einem bestimmten Element, gilt sie für dieses Element und alle seine Kinder. Das erlaubt es dir, denselben Variablennamen je nach Kontext unterschiedlich zu belegen:

.alert {
  --accent: #dc2626;
  border-left: 4px solid var(--accent);
  color: var(--accent);
}

.alert.success {
  --accent: #16a34a; /* überschreibt nur innerhalb dieser Box */
}

Weil die Variable vererbt wird, müssen die einzelnen Regeln für border-left und color nicht dupliziert werden – ein Wert steuert beides.

Theming: Dark Mode mit Custom Properties

Der wohl beliebteste Anwendungsfall ist das Umschalten zwischen Themes. Du definierst deine Farben als Variablen und überschreibst sie in einem alternativen Kontext – zum Beispiel über ein data-Attribut am <html>-Element.

:root {
  --bg: #ffffff;
  --fg: #1f2937;
}

[data-theme="dark"] {
  --bg: #111827;
  --fg: #f9fafb;
}

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

Deine eigentlichen Regeln (body) bleiben unverändert. Sobald sich das Attribut ändert, tauscht der Browser die Werte aus und die ganze Seite wechselt das Erscheinungsbild. Willst du dich stattdessen an der Systemeinstellung orientieren, kombinierst du das mit einer Media Query:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --fg: #f9fafb;
  }
}

Custom Properties mit JavaScript ändern

Weil die Variablen zur Laufzeit existieren, kannst du sie direkt aus JavaScript lesen und schreiben. Genau das brauchst du für einen Theme-Umschalter oder dynamische Werte, etwa eine Fortschrittsanzeige.

const root = document.documentElement;

// Wert setzen
root.style.setProperty("--primary-color", "#f97316");

// Wert auslesen
const styles = getComputedStyle(root);
const current = styles.getPropertyValue("--primary-color");
console.log(current.trim()); // "#f97316"

// Dark Mode per Button umschalten
document.querySelector("#toggle").addEventListener("click", () => {
  const isDark = root.getAttribute("data-theme") === "dark";
  root.setAttribute("data-theme", isDark ? "light" : "dark");
});

Mit setProperty und getPropertyValue hast du vollen Zugriff. So verbindest du Style und Logik, ohne einzelne CSS-Regeln aus dem Code heraus manipulieren zu müssen.

Fazit

CSS Custom Properties sind ein einfaches, aber extrem wirkungsvolles Werkzeug. Sie reduzieren Wiederholung, machen Rebranding zur Sache einer einzigen Zeile und ermöglichen echtes Theming ohne Build-Schritt. Weil sie vererbt werden und zur Laufzeit im Browser leben, spielen sie perfekt mit JavaScript zusammen – ideal für Dark Mode, dynamische Layouts und wiederverwendbare Komponenten. Beginne klein: Ziehe deine Farben und Abstände in :root, ersetze feste Werte durch var() und tanke von dort aus weiter. Dein zukünftiges Ich wird es dir beim nächsten Redesign danken.

Weiterlesen