Les variables CSS centralisent vos styles et simplifient les thèmes

Les variables CSS, plus précisément appelées propriétés personnalisées, permettent de nommer une valeur puis de la réutiliser dans toute une interface. Couleurs, espacements, polices, rayons et ombres ne sont plus dispersés sous forme de valeurs brutes. Une modification centralisée suffit pour faire évoluer le design ou adapter une zone précise.

Comprendre le principe des propriétés personnalisées

Une variable CSS associe un nom à une valeur. Sa déclaration commence obligatoirement par deux tirets : --couleur-accent: #3498db;. Pour l’utiliser, on fait appel à la fonction var(), par exemple color: var(--couleur-accent);. Contrairement à une variable classique d’un langage de programmation, elle est résolue par le navigateur lorsqu’il calcule les styles.

Le nom est sensible à la casse : --Couleur-accent et --couleur-accent désignent donc deux propriétés différentes. Il est préférable d’adopter des noms en minuscules, séparés par des tirets, et surtout sémantiques. --couleur-texte-primaire décrit son rôle bien mieux que --bleu-1, même si la couleur change plus tard.

Déclarer globalement avec :root

Le sélecteur :root cible l’élément racine du document. Une variable déclarée à cet endroit est généralement disponible pour les éléments de la page grâce à l’héritage. C’est un emplacement adapté aux fondations d’un design system : :root { --espace-m: 16px; --rayon-carte: 12px; --police-corps: Arial, sans-serif; }. Les composants peuvent ensuite utiliser ces tokens sans répéter leurs valeurs.

Référencer une valeur et prévoir un fallback

La fonction var() accepte un second argument facultatif, qui sert de valeur de secours. Avec color: var(--couleur-texte, #333);, le navigateur applique #333 si --couleur-texte est absente ou ne peut pas être résolue. Ce fallback est utile pour les composants réutilisables, qui peuvent être intégrés dans des contextes différents.

Portée, héritage et cascade : la valeur qui s’applique vraiment

Les propriétés personnalisées participent à la cascade CSS et héritent par défaut de leur parent. Une variable définie sur un conteneur devient donc disponible pour ses descendants. La valeur finale dépend de la règle qui s’applique au contexte de l’élément. Ce mécanisme permet de personnaliser un composant sans dupliquer ses règles de style.

Redéfinir sans changer le code du composant

Supposons qu’un bouton utilise background: var(--action-fond);. Une section promotionnelle peut déclarer --action-fond: #e74c3c; sur son conteneur. Tous les boutons enfants prennent alors cette teinte, sans nouvelle règle de fond. À l’extérieur de cette section, ils conservent la valeur définie dans :root. Cette logique réduit le nombre de classes de couleur et préserve la structure du composant.

Pour nommer un token, partez de la fonction attendue plutôt que de la couleur visible aujourd’hui. --surface-elevee, --bordure-discrete et --texte-inverse restent pertinents lorsqu’une charte passe du beige au gris. À l’inverse, --gris-clair oblige à réinterpréter l’intention derrière chaque emploi. Cette séparation entre rôle visuel et valeur brute rend les refontes plus sûres.

Organiser un système de design maintenable

Les variables CSS prennent tout leur intérêt lorsque les répétitions deviennent nombreuses. Au lieu de rechercher chaque code hexadécimal, chaque taille ou chaque ombre dans une feuille de style, on modifie une source de vérité. La cohérence visuelle progresse et les changements présentent moins de risques.

Partir des valeurs brutes puis créer des tokens de rôle

Une organisation robuste distingue les valeurs de référence de leurs usages. Par exemple, une palette peut contenir --bleu-600, tandis que les composants utilisent --action-fond ou --lien-texte. Les règles d’interface consomment alors des noms de rôle. Si l’action principale doit adopter une autre couleur, la modification se fait dans l’association du token sémantique, plutôt que dans chaque bouton.

• Centralisez les couleurs, les familles de polices, les tailles, les espacements, les ombres et les rayons récurrents.
• Conservez une convention stable, comme --espace-s, --espace-m et --espace-l.
• Déclarez localement les valeurs propres à un composant ou à une variante.
• Documentez les tokens de rôle pour éviter les détournements au fil du projet.
• Ajoutez une valeur de secours lorsque le composant doit fonctionner hors de son environnement habituel.

Créer des thèmes clair et sombre sans réécrire les composants

La thématisation consiste à conserver les mêmes règles de composants et à redéfinir leurs tokens. Un thème clair peut définir --surface-page: #ffffff; et --texte-primaire: #333;. Une classe portée par un parent, telle que .dark-theme, peut fournir --surface-page: #1f1f1f; et une valeur claire pour --texte-primaire. Les éléments qui utilisent background: var(--surface-page) et color: var(--texte-primaire) s’adaptent automatiquement.

Modifier une variable avec JavaScript

Les variables CSS sont accessibles pendant l’exécution, ce qui les distingue des variables compilées par Sass ou LESS. Pour changer une valeur sur la racine du document, JavaScript peut utiliser document.documentElement.style.setProperty('--couleur-accent', '#e74c3c');. Cette approche convient à un sélecteur de couleur, à un réglage d’espacement, à une prévisualisation ou à une bascule de thème. Pour un thème complet, ajouter ou retirer une classe sur un conteneur reste souvent plus lisible, car les valeurs restent regroupées dans le CSS.

Connaître les limites et choisir entre CSS, Sass et LESS

La fonction var() s’emploie dans la valeur d’une propriété : couleur, marge, taille, arrière-plan ou calcul compatible. Elle ne permet pas de créer dynamiquement un nom de propriété, un sélecteur, une media query ou une container query. Une règle telle que @media (min-width: var(--largeur-tablette)) ne fonctionne donc pas. Les conditions de mise en page doivent rester écrites avec des valeurs directement exploitables dans ces règles.

Quand utiliser @property

La règle @property ajoute un cadre aux propriétés personnalisées. Elle permet de préciser le type attendu avec syntax, le comportement d’héritage avec inherits et la valeur par défaut avec initial-value. Elle est utile lorsqu’une variable doit accepter une valeur précise, notamment pour sécuriser une propriété animée. Une déclaration peut indiquer qu’une propriété attend une couleur, qu’elle n’hérite pas et que sa valeur initiale est #3498db. Pour des tokens classiques, la syntaxe à deux tirets suffit le plus souvent.

Le choix n’est pas exclusif. Sass ou LESS restent utiles pour organiser et générer des styles avant leur livraison, tandis que les variables CSS gèrent les valeurs qui doivent rester modifiables dans l’interface. Commencez par un petit ensemble de tokens sémantiques, vérifiez leur portée, puis étendez-le au rythme réel de votre design system.