Qu’est-ce qu’une Variable CSS ?

Une variable CSS est une propriété personnalisée définie directement dans une feuille de style, qui permet de stocker une valeur (comme une couleur, une taille, ou toute autre unité CSS) pouvant être réutilisée à plusieurs endroits dans le code. Contrairement aux valeurs figées, une variable CSS rend le code plus flexible, maintenable et dynamique. Elles sont identifiées par un nom précédé de deux tirets -- et s’utilisent avec la fonction var(). Par exemple :

:root {
  --couleur-primaire: #3498db;
}

.bouton {
  background-color: var(--couleur-primaire);
}

Ici, la variable --couleur-primaire est déclarée globalement et réutilisée dans la classe .bouton.

Comment définir et utiliser une variable CSS ?

Définition de la variable

Les variables CSS sont généralement déclarées dans un sélecteur — souvent :root pour une portée globale. La syntaxe se présente ainsi :

sélecteur {
  --nom-variable: valeur;
}

Exemple :

:root {
  --taille-texte: 16px;
  --espace-vertical: 1.5rem;
}

Utilisation de la variable

Pour récupérer la valeur stockée dans une variable, on utilise la fonction var() :

p {
  font-size: var(--taille-texte);
  margin-bottom: var(--espace-vertical);
}

Cette fonction accepte aussi une seconde valeur en cas d’indisponibilité :

color: var(--couleur-secondaire, #333);

Ici, si la variable --couleur-secondaire n’est pas définie, la couleur par défaut sera #333.

Pourquoi utiliser des variables CSS ?

L’utilisation des variables CSS offre plusieurs avantages notables :

• Maintenance facilitée : Modifier une valeur dans une variable globale applique automatiquement le changement partout où elle est référencée, évitant les erreurs et répétitions.
• Consistance et cohérence : Permet d’uniformiser les styles sur l’ensemble du site (couleurs, espacements, typographies).
• Thématisation simple : En changeant les valeurs des variables, il devient aisé de passer d’un thème clair à un thème sombre ou autre sans modifier les règles CSS spécifiques.
• Réactivité et personnalisation : Couplées à JavaScript, les variables peuvent être modifiées dynamiquement pour offrir des expériences utilisateurs interactives.
• Héritage naturel : Les variables suivent la cascade CSS, offrant une flexibilité dans leur portée et leur re-définition dans le DOM.

Portée, héritage et cascade des variables CSS

Contrairement aux préprocesseurs CSS comme SASS, les variables CSS sont interprétées par le navigateur et obéissent au modèle de cascade et d’héritage du CSS :

• Une variable définie sur :root est globale et accessible partout.
• Une variable définie dans un élément spécifique est accessible dans ce bloc et ses descendants.
• Les variables peuvent être surchargées : une définition plus proche du DOM a priorité.
• Si une variable n’est pas définie dans une portée donnée, elle est résolue dans la chaîne d’héritage jusqu’à son existence ou la valeur par défaut.

Ce comportement permet d’implémenter facilement plusieurs thèmes ou variations contextuelles.

Cas d’utilisation avancés des variables CSS

Variables combinées

Il est possible d’utiliser des variables dans la définition d’autres variables, favorisant la construction modulaire :

:root {
  --couleur-primaire: #3498db;
  --couleur-claire: var(--couleur-primaire);
  --couleur-foncee: #2c80b4;
}

Variables et animations

Les variables CSS peuvent être animées via les propriétés CSS custom properties couplées à @keyframes :

@keyframes pulse {
  0% {
    --ombre-ombre: 0 0 5px #3498db;
  }
  100% {
    --ombre-ombre: 0 0 20px #3498db;
  }
}

.bouton {
  box-shadow: var(--ombre-ombre);
  animation: pulse 2s infinite alternate;
}

Thèmes dynamiques

En modifiant les valeurs des variables CSS dans le DOM via JavaScript, on peut changer les apparences sans recharger la page :

document.documentElement.style.setProperty('--couleur-primaire', '#e74c3c');

Cela facilite l’implémentation de modes sombre/claire ou autres thématiques personnalisées.

Limitations et bonnes pratiques

Bien que puissantes, les variables CSS ne peuvent pas tout remplacer :

• Elles ne peuvent pas être utilisées dans les sélecteurs CSS.
• La valeur d’une variable doit être une chaîne valide pour la propriété ciblée.
• Il est recommandé de nommer les variables clairement et de documenter leur usage pour éviter la confusion.
• Pour un support large, vérifier la compatibilité des variables CSS avec les navigateurs ciblés est important, même si elles sont désormais bien prises en charge.

En utilisant les variables CSS intelligemment, on obtient des feuilles de style plus modulaires, maintenables et modulables, ouvrant la voie à des projets web plus dynamiques et adaptés aux besoins actuels.