Que sont les propriétés personnalisées CSS (variables) ?

Question

Accepted Answer

**Les propriétés personnalisées CSS** (variables) vous permettent de stocker des valeurs une fois et de les réutiliser. Contrairement aux variables de préprocesseur (Sass), elles sont **actives au runtime** — elles en cascade, héritent, et peuvent être modifiées avec JavaScript ou des 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);
}
```

## Valeurs par défaut

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

## Elles en cascade et peuvent être limitées en portée/remplacées

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

Car elles héritent, une variable définie sur un parent est disponible pour tous les descendants et peut être remplacée sur un sous-arbre — quelque chose que les variables Sass (qui sont compilées) ne peuvent pas faire.

## La fonctionnalité clé : thémas au runtime

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

Changer un thème entier en redéfinissant une poignée de variables — aucune règle dupliquée. Vous pouvez aussi le faire en JS :

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

Cela met à jour instantanément tous les éléments utilisant cette variable — impossible avec les variables Sass compilées.

## Pourquoi c'est important

Les variables CSS sont la fondation du **thémas modernes et des tokens de conception** : définir des couleurs/espacements une fois, les réutiliser partout, et basculer de thème (mode sombre, variantes de marque) au runtime via des media queries ou JavaScript.

Elles apportent le DRY et les valeurs dynamiques au CSS brut — aucune étape de compilation requise.