Was sind benutzerdefinierte CSS-Eigenschaften (Variablen)?

Question

Accepted Answer

**Benutzerdefinierte CSS-Eigenschaften** (Variablen) ermöglichen es dir, Werte einmal zu speichern und wiederzuverwenden. Anders als Präprozessor-Variablen (Sass) sind sie **zur Laufzeit aktiv** — sie kaskadieren, werden vererbt und können mit JavaScript oder Media Queries geändert werden.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Fallback-Werte

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Sie kaskadieren und können gezielt gesetzt/überschrieben werden

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Weil sie vererbt werden, ist eine Variable, die auf einem Elternelement gesetzt ist, für alle Nachkommen verfügbar und kann in einem Teilbaum überschrieben werden — etwas, das Sass-Variablen (die kompiliert werden) nicht können.

## Warum es wichtig ist

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Wechsle ein ganzes Design durch Neudefinition einiger Variablen — ohne doppelte Regeln. Das kannst du auch in JS machen:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Dies aktualisiert sofort jedes Element, das diese Variable nutzt — unmöglich mit kompilierten Sass-Variablen.

CSS-Variablen sind die Grundlage moderner **Themes und Design Tokens**: Definiere Farben/Abstände einmal, verwende sie überall wieder und wechsle Themes (Dark Mode, Marken-Varianten) zur Laufzeit über Media Queries oder JavaScript.

Sie bringen DRY und dynamische Werte zu reinem CSS — ohne Build-Schritt erforderlich.