CSS Custom Properties

Eine Custom Property beginnt immer mit zwei Bindestrichen (--) gefolgt von einem Namen. Du definierst sie wie jede andere CSS-Eigenschaft:

:root {
  --farbe-primary: #1a56db;
  --farbe-hintergrund: #dbeafe;
  --abstand: 16px;
}

.box {
  background: var(--farbe-hintergrund);
  border: 2px solid var(--farbe-primary);
  color: var(--farbe-primary);
  padding: var(--abstand);
}

<div class="box">Dieses Element nutzt Custom Properties.</div>

:root ist ein Selektor, der auf das <html>-Element zeigt. Custom Properties, die du dort definierst, stehen im gesamten Dokument zur Verfügung. Das ist der übliche Ort für globale Design-Werte.

Mit der var()-Funktion greifst du auf den Wert einer Custom Property zu:

:root {
  --primary: #1a56db;
  --radius: 8px;
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
}

.card {
  border: 2px solid var(--primary);
  border-radius: var(--radius);
}

<button class="button">Button</button>
<div class="card" style="margin-top:12px">Karte mit demselben Blau und Radius.</div>

Änderst du --primary auf :root, ändert sich die Farbe automatisch bei Button und Karte. Das ist der Kern von Custom Properties: Eine Stelle ändern, überall wirksam.

Custom Properties folgen der normalen CSS-Vererbung. Das bedeutet: Du kannst sie auf jedem Element definieren, und alle Kinder erben den Wert.

:root {
  --farbe: #1a56db;
}

.bereich-a {
  --farbe: #dc2626;
}

.bereich-b {
  --farbe: #059669;
}

.box {
  color: var(--farbe);
  border-left: 4px solid var(--farbe);
}

<div class="box">Root: Blau (--farbe: #1a56db)</div>
<div class="bereich-a">
<div class="box">Bereich A: Rot (--farbe: #dc2626)</div>
</div>
<div class="bereich-b">
<div class="box">Bereich B: Grün (--farbe: #059669)</div>
</div>

.box verwendet immer var(--farbe), aber der tatsächliche Wert hängt davon ab, wo sich die Box im DOM befindet. Im Bereich A ist --farbe rot, im Bereich B grün, und außerhalb beider Bereiche gilt der globale blaue Wert von :root.

Die var()-Funktion akzeptiert einen zweiten Parameter: einen Fallback-Wert, der greift, wenn die Custom Property nicht definiert ist.

.element {
  /* --nicht-definiert existiert nicht → #dc2626 wird verwendet */
  color: var(--nicht-definiert, #dc2626);

  /* Verschachtelte var() als Fallback */
  background: var(--theme-bg, var(--default-bg, #f3f4f6));
}

<div class="mit-fallback">Fallback-Werte: rot auf gelb.</div>

Fallbacks sind besonders nützlich, wenn du Komponenten baust, die auch ohne bestimmte Custom Properties funktionieren sollen. Der Fallback-Wert kann sogar eine weitere var()-Funktion sein.

Der häufigste Einsatzzweck für Custom Properties ist ein Theme-System. Du definierst alle Farben als Variablen und tauschst sie je nach Kontext aus:

.theme-light {
  --bg: #ffffff;
  --text: #1f2937;
  --primary: #1a56db;
  --surface: #f3f4f6;
}

.theme-dark {
  --bg: #1f2937;
  --text: #f3f4f6;
  --primary: #60a5fa;
  --surface: #374151;
}

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

.card {
  background: var(--surface);
}

.link {
  color: var(--primary);
}

<div class="theme-light demo-page">
<strong>Light Theme</strong>
<div class="demo-card">Karte mit <span class="demo-link">einem Link</span></div>
</div>
<div class="theme-dark demo-page">
<strong>Dark Theme</strong>
<div class="demo-card">Karte mit <span class="demo-link">einem Link</span></div>
</div>

Das CSS für .page, .card und .link bleibt identisch. Nur die Custom Properties ändern sich je nach Theme-Klasse. Das macht Theming wartbar: Neue Farben anpassen bedeutet, ein paar Variablen zu ändern, nicht hunderte Regeln zu durchsuchen.

Wenn du von Sass oder Less gehört hast: Diese Tools bieten auch Variablen ($farbe in Sass, @farbe in Less). Der entscheidende Unterschied liegt im Zeitpunkt:

CSS Custom Properties sind echte CSS-Features, die im Browser leben. Sass-Variablen sind Platzhalter, die beim Kompilieren durch feste Werte ersetzt werden. Für Theming und dynamische Werte sind Custom Properties die bessere Wahl.

Du kannst jetzt Werte zentral definieren und dein CSS wartbarer gestalten. Im nächsten Artikel geht es um CSS Funktionen: calc(), min(), max(), clamp() und wie du damit flexible Berechnungen direkt in CSS schreibst.