Wat zijn CSS custom properties (variabelen)?

Question

Accepted Answer

**CSS custom properties** (variabelen) laten je waarden eenmaal opslaan en hergebruiken. In tegenstelling tot preprocessor (Sass) variabelen zijn ze **live tijdens runtime** — ze cascaden, erven over, en kunnen worden gewijzigd met JavaScript of media queries.

```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 values

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

## Ze cascaden en kunnen gedefinieerd/overschreven worden

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

Omdat ze erven, is een variabele ingesteld op een parent beschikbaar voor alle nakomelingen en kan worden overschreven in een subtree — iets wat Sass variabelen (die worden weggecompileerd) niet kunnen doen.

## De killer feature: runtime theming

```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); }
```

Vaag een compleet thema om door een handvol variabelen opnieuw te definiëren — geen gedupliceerde regels. Je kunt het ook in JS doen:

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

Dit werkt onmiddellijk elk element bij dat deze variabele gebruikt — onmogelijk met gecompileerde Sass variabelen.

## Waarom het belangrijk is

CSS variabelen zijn de basis van modern **theming en design tokens**: definieer kleuren/spatiëring eenmaal, hergebruik overal, en wissel thema's (dark mode, brand varianten) tijdens runtime via media queries of JavaScript.

Ze brengen DRY, dynamische waarden naar plain CSS — geen bouwstap vereist.