# Variable CSS

> Une variable CSS, ou propriété personnalisée, stocke une valeur réutilisable sous un nom préfixé par deux tirets et se lit avec la fonction var(), directement dans le navigateur.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/variable-css/

Recopier la même teinte de bleu dans cinquante règles CSS, puis devoir la changer partout le jour où la charte évolue : c'est exactement ce que les variables CSS permettent d'éviter. Déclarées avec la syntaxe `--nom-de-variable: valeur;` sur un sélecteur (souvent `:root` pour une portée globale), elles se réutilisent ensuite avec `var(--nom-de-variable)`, et peuvent même être redéfinies localement pour une portion précise de la page.

## Fonctionnement dans WordPress

Depuis l'introduction de `theme.json`, WordPress génère automatiquement des variables CSS pour chaque couleur, taille de police, espacement ou dégradé déclaré dans les préréglages, avec un nommage prévisible comme `--wp--preset--color--vivid-cyan-blue`. Ces variables sont injectées dans les styles globaux du site et réutilisées par les blocs et par tout CSS personnalisé, ce qui permet de changer un préréglage à un seul endroit et de voir la mise à jour se propager partout.

## Exemple

```
:root {
  --couleur-accent: #2563eb;
}

.wp-block-button__link {
  background-color: var(--couleur-accent);
  background-color: var(--wp--preset--color--vivid-cyan-blue, var(--couleur-accent));
}
```

## Bon à savoir

- Contrairement aux variables Sass, une variable CSS existe réellement dans le navigateur : elle est inspectable dans les outils de développement et peut être modifiée en JavaScript à l'exécution.
- La fonction `var()` accepte une valeur de repli en second argument, utile quand une variable de préréglage pourrait ne pas être définie.
- Les variables CSS suivent les règles normales de la cascade et de l'héritage : une variable redéfinie dans un bloc parent s'applique à tous ses enfants, sauf surcharge locale.