HTML & CSS

CSS Custom Properties: Variablen im Stylesheet

Mit CSS Custom Properties definierst du Werte einmal und nutzt sie überall. Du lernst, wie eigene Variablen funktionieren und wie sie Themes und Wartung vereinfachen.

Anton

— 2 Min. Lesezeit
Teilen
CSS Custom Properties: Variablen im Stylesheet

Wer schon einmal eine Farbe an Dutzenden Stellen im Stylesheet ändern musste, kennt den Frust. CSS Custom Properties, oft einfach CSS-Variablen genannt, lösen genau dieses Problem. Du definierst einen Wert einmal und verwendest ihn überall. In diesem Beitrag schauen wir uns an, wie sie funktionieren, wie du sie verschachtelst und wie du damit sogar einen Dark Mode baust.

Eine Variable definieren und nutzen

Eine Custom Property erkennst du an den zwei führenden Bindestrichen. Üblicherweise definierst du sie auf dem :root-Selektor, damit sie global gilt. Mit der var()-Funktion rufst du sie ab:

:root {
  --hauptfarbe: #0066cc;
  --abstand: 16px;
}

.button {
  background-color: var(--hauptfarbe);
  padding: var(--abstand);
}

.karte {
  border: 2px solid var(--hauptfarbe);
}

Änderst du nun --hauptfarbe an einer einzigen Stelle, passt sich der Wert überall an. Das spart Zeit und vermeidet Fehler.

Fallback-Werte angeben

Die var()-Funktion erlaubt einen zweiten Parameter als Rückfallwert. Er greift, falls die Variable nicht definiert ist:

.text {
  /* Falls --textfarbe fehlt, wird #333 verwendet */
  color: var(--textfarbe, #333);
}

.box {
  /* Sinnvoll bei optionalen Variablen */
  margin: var(--box-abstand, 8px);
}

Fallback-Werte machen deinen Code robuster, gerade wenn Variablen nur in bestimmten Kontexten gesetzt werden.

Variablen vererben und überschreiben

Ein großer Vorteil gegenüber Variablen in Präprozessoren ist, dass Custom Properties dem normalen CSS-Vererbungsmodell folgen. Du kannst sie für einzelne Bereiche überschreiben:

:root {
  --akzent: blue;
}

.warnung {
  --akzent: orange; /* nur hier und darunter */
  color: var(--akzent);
}

.normal {
  color: var(--akzent); /* bleibt blau */
}
<p class="normal">Blauer Text</p>
<div class="warnung">
  <p>Oranger Text durch lokale Variable</p>
</div>

Innerhalb von .warnung hat --akzent einen anderen Wert. Das macht kontextabhängiges Styling sehr elegant.

Ein einfaches Theme bauen

Custom Properties eignen sich hervorragend, um ein konsistentes Designsystem zu pflegen. Du sammelst alle wichtigen Werte an einer Stelle:

:root {
  --farbe-primaer: #0066cc;
  --farbe-text: #1a1a1a;
  --farbe-hintergrund: #ffffff;
  --schrift: "Helvetica", sans-serif;
  --radius: 8px;
}

body {
  background-color: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: var(--schrift);
}

.karte {
  border-radius: var(--radius);
  background-color: var(--farbe-hintergrund);
}

Dark Mode mit einer Klasse

Da Variablen überschreibbar sind, lässt sich ein Dark Mode mit wenigen Zeilen umsetzen. Du definierst andere Werte für eine Klasse am <body>:

:root {
  --farbe-text: #1a1a1a;
  --farbe-hintergrund: #ffffff;
}

body.dunkel {
  --farbe-text: #f0f0f0;
  --farbe-hintergrund: #1a1a1a;
}

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

Schaltest du per JavaScript die Klasse dunkel am Body um, wechseln alle Farben automatisch. Kein einziger weiterer Selektor ist nötig.

Fazit

CSS Custom Properties bringen echte Variablen direkt in dein Stylesheet, ohne dass du einen Präprozessor brauchst. Du definierst Werte zentral mit --name, rufst sie mit var() ab und überschreibst sie bei Bedarf für einzelne Bereiche. Damit pflegst du Designsysteme an einer Stelle, machst deinen Code wartbarer und kannst sogar mit minimalem Aufwand einen Dark Mode anbieten. Beginne damit, deine Farben und Abstände in Variablen auszulagern. Du wirst den Unterschied schon beim nächsten Änderungswunsch spüren.

Weiterlesen