Les variables CSS (officiellement appelées custom properties) sont une fonctionnalité native des navigateurs qui permet de définir une valeur une seule fois et de la réutiliser partout dans votre feuille de style. Elles centralisent des valeurs comme les couleurs, les espacements et les polices sans avoir besoin d'un préprocesseur tel que Sass, et le meilleur, c'est qu'elles peuvent être modifiées à l'exécution avec JavaScript. Dans cet article, nous allons mettre en place les variables CSS de zéro, construire un véritable thème clair/sombre et voir des motifs utiles au quotidien.
Que sont exactement les variables CSS ?
Une custom property se compose d'un nom commençant par -- et d'une valeur. Pour la lire, on utilise la fonction var(). L'approche la plus courante consiste à déclarer ses variables sur le sélecteur :root, car :root cible l'élément racine du document (<html>) et les variables qui y sont définies sont accessibles sur toute la page.
:root {
--couleur-primaire: #6c5ce7;
--couleur-texte: #1a1a1a;
--espace: 16px;
}
.bouton {
background: var(--couleur-primaire);
color: white;
padding: var(--espace);
}Désormais, lorsque vous voulez changer la couleur primaire, vous modifiez une seule ligne, et les dizaines de règles qui en dépendent se mettent à jour automatiquement. Contrairement aux valeurs codées en dur, vous obtenez une source unique de vérité.
var() et les valeurs de repli (fallback)
var() peut prendre un deuxième argument : une valeur de repli. Si la variable est indéfinie ou invalide, ce repli prend le relais. C'est pratique pour accéder en toute sécurité à une variable pas encore définie :
.carte {
/* le blanc est utilisé si --carte-fond est indéfini */
background: var(--carte-fond, #ffffff);
border-radius: var(--carte-radius, 8px);
}Le repli couvre tout ce qui suit la virgule, si bien qu'un autre var() peut servir de repli : var(--a, var(--b, red)).
Héritage et portée
Le plus grand atout des variables CSS est qu'elles suivent l'héritage CSS normal. Si vous définissez une variable sur un élément précis, seuls cet élément et ses descendants voient la valeur. Cela facilite la création de thèmes à la portée d'un composant :
.alerte {
--couleur-accent: #e17055;
}
.alerte .titre {
color: var(--couleur-accent); /* orange */
}Vous pouvez définir la même variable --couleur-accent avec des valeurs différentes dans des conteneurs différents et changer l'apparence des composants partagés qu'ils contiennent en une seule ligne. C'est quelque chose que vous ne pouvez pas faire avec les variables Sass, car celles-ci sont résolues à la compilation et n'ont aucune notion de portée ni d'héritage.
Exemple pratique : thème clair/sombre
L'usage le plus fréquent des variables CSS est le changement de thème. Vous déplacez vos couleurs dans des variables, puis vous surchargez les valeurs selon un attribut data-theme sur <html> :
:root {
--bg: #ffffff;
--texte: #1a1a1a;
--carte: #f5f5f7;
}
[data-theme="dark"] {
--bg: #0f0f12;
--texte: #f2f2f5;
--carte: #1c1c22;
}
body { background: var(--bg); color: var(--texte); }
.carte { background: var(--carte); }Déclencher le changement avec JavaScript tient en quelques lignes :
const btn = document.querySelector('#bascule-theme');
btn.addEventListener('click', () => {
const html = document.documentElement;
const suivant = html.dataset.theme === 'dark' ? 'light' : 'dark';
html.dataset.theme = suivant;
localStorage.setItem('theme', suivant);
});Une mise en garde : si vous voulez que toute la page bascule d'un coup, il est sage de désactiver temporairement vos animations de transition pendant le changement ; sinon le navigateur tente d'adoucir des centaines d'éléments en même temps, ce qui peut sembler lent.
Lire et écrire des variables avec JavaScript
Les custom properties peuvent être lues et écrites via le DOM. C'est puissant pour produire des styles dynamiques selon la position de défilement, le mouvement de la souris ou la saisie de l'utilisateur :
const root = document.documentElement;
// Écriture
root.style.setProperty('--couleur-primaire', '#00b894');
// Lecture
const valeur = getComputedStyle(root)
.getPropertyValue('--couleur-primaire')
.trim();Par exemple, vous pouvez écrire la position de la souris dans une variable et construire un effet de halo (glow) uniquement avec du CSS. La logique reste en JavaScript tandis que le visuel vit entièrement en CSS, ce qui garde le code propre.
Bonnes pratiques et pièges
- Utilisez des noms parlants. Des noms fondés sur le rôle comme
--couleur-primairesont plus maintenables que des noms fondés sur la valeur comme--violet, car le nom garde du sens même si la valeur change. - Regroupez vos design tokens. Rassemblez les groupes comme couleurs, espacements, rayons et ombres en blocs logiques dans
:root. - Elles sont sensibles à la casse.
--Couleuret--couleursont deux variables différentes. - Elles contiennent des valeurs, pas des sélecteurs. Vous ne pouvez attribuer à une variable qu'une valeur (couleur, nombre, longueur), pas une règle CSS complète.
- Le support des navigateurs est large. Tous les navigateurs modernes les prennent en charge depuis des années ; seules de très anciennes versions d'Internet Explorer ne le font pas.
Questions fréquentes
Quelle est la différence entre variables CSS et variables Sass ?
Les variables Sass ($couleur) sont résolues à la compilation et n'apparaissent pas dans le CSS final ; elles sont statiques. Les variables CSS (--couleur) restent vivantes dans le navigateur, respectent l'héritage et peuvent être modifiées à l'exécution avec JavaScript. Pour des scénarios dynamiques comme les thèmes, les variables CSS conviennent bien mieux.
Puis-je utiliser des media queries avec les custom properties ?
Oui. En redéfinissant une variable dans un bloc @media, vous pouvez produire des valeurs adaptatives ; par exemple --espace: 32px sur grand écran et --espace: 16px sur mobile. Chaque composant utilisant cette variable s'adapte automatiquement.
Que se passe-t-il si une variable reçoit une valeur invalide ?
La propriété concernée est marquée comme invalide au moment du calcul de la valeur, et la valeur héritée ou initiale de la propriété est utilisée à la place. C'est pourquoi ajouter une valeur de repli var() aux endroits critiques est un choix sûr.
Vous voulez un design system propre et évolutif dans votre projet ? Je peux vous aider à construire une interface maintenable et prête pour les thèmes avec des variables CSS. Contactez-moi et parlons de votre projet.