Utiliser des variables en CSS - Php, code, ia et marketing

Depuis l’arrivée du CSS Custom Properties (aussi appelé « variables CSS »), il est possible de stocker des valeurs réutilisables comme des couleurs, des tailles ou des espacements. Cela facilite l’entretien des styles, surtout dans des projets plus complexes.

Les variables CSS sont définies avec un double tiret -- et accessibles avec la fonction var().

1. Déclaration d’une variable CSS

Les variables s’écrivent à l’intérieur d’un sélecteur (souvent :root) pour être accessibles partout.


:root {
  --main-color: #3498db;
  --padding-standard: 16px;
}

Les variables --main-color et --padding-standard sont désormais disponibles dans tout le CSS.

2. Utiliser une variable avec `var()`

On utilise var(--nom-de-la-variable) comme valeur dans n’importe quelle propriété CSS.


.button {
  background-color: var(--main-color);
  padding: var(--padding-standard);
}

Ce bouton utilise les variables CSS pour sa couleur et son espacement.

3. Surcharge locale d’une variable

Tu peux redéfinir une variable uniquement à l’intérieur d’un élément. Elle remplace alors la valeur globale dans ce contexte.


.card {
  --main-color: green;
  background-color: var(--main-color);
}

Ici, --main-color est localement redéfini à « green ».

4. Ajouter une valeur de repli (fallback)

Tu peux spécifier une valeur de secours au cas où la variable n’est pas définie. C’est utile pour la compatibilité ou le débogage.


color: var(--text-color, black);

Si --text-color n’existe pas, la couleur utilisée sera noire.

5. Exemple complet avec plusieurs variables


:root {
  --main-color: #ff6600;
  --text-color: #222;
  --radius: 8px;
}

.card {
  background: var(--main-color);
  color: var(--text-color);
  border-radius: var(--radius);
  padding: 20px;
}

Cette carte utilise plusieurs variables CSS pour ses couleurs et ses coins arrondis.

Bonnes pratiques

Déclare les variables globales dans :root
Utilise des noms clairs, cohérents et lisibles
Regroupe tes variables par fonction (couleurs, espacements, typographies, etc.)
Ajoute toujours une valeur de secours si le projet est multi-navigateurs

Conclusion

Les variables CSS simplifient énormément la gestion des styles : plus besoin de chercher toutes les occurrences d’une couleur ou d’une taille. Une seule modification dans :root suffit pour mettre à jour toute l’apparence de ton site.