Variables CSS

Les variables CSS, officiellement appelées propriétés personnalisées (custom properties), permettent de stocker une valeur une seule fois et de la réutiliser dans toute une feuille de style. Définissez une couleur de marque, un pas d'espacement ou une police à un seul endroit, référencez-la partout, et un changement sur cette unique déclaration met à jour tout le site. C'est la façon native, sans build, de garder des valeurs de design cohérentes.

Comment les déclarer et les utiliser

Une propriété personnalisée se déclare avec un nom précédé d'un double tiret, en général sur le sélecteur :root pour qu'elle soit disponible partout, et se lit avec la fonction var(). On peut passer une valeur de repli en second argument.

• Déclarer : :root { --brand: #1a1a1a; --space: 1rem; }
• Utiliser : color: var(--brand); padding: var(--space);
• Repli : color: var(--brand, #000);

Portée et cascade

Les propriétés personnalisées suivent la cascade et héritent comme n'importe quelle règle CSS. Déclarées sur :root, elles sont globales ; déclarées sur un composant, elles sont limitées à cet élément et à ses enfants. On peut ainsi définir une valeur par défaut une fois et la redéfinir dans une section, une carte ou un bloc sombre sans toucher au reste du site.

Variables CSS ou variables Sass

Les deux se ressemblent mais agissent à des moments différents. Une variable Sass est résolue une fois à la compilation puis disparaît du résultat. Une variable CSS vit dans le navigateur à l'exécution, elle peut donc changer via une media query ou du JavaScript, ce qui rend le théming dynamique possible.

Cas d'usage courants

Les propriétés personnalisées brillent dès qu'une valeur se répète ou doit changer en groupe.

• Design tokens : couleurs, espacements, rayons et typographie définis une fois puis réutilisés.
• Mode sombre : redéfinir quelques propriétés dans une media query ou via un attribut de données.
• Théming : changer une palette de marque par section ou par client depuis un seul endroit.
• Contrôle JavaScript : lire et écrire les propriétés avec getComputedStyle et style.setProperty pour des interfaces interactives.

Bonnes pratiques et pièges

Nommez les propriétés par intention (--color-text, pas --gris-fonce) pour que le sens survive à un changement de marque. Gardez les tokens globaux sur :root et limitez bien les surcharges locales. Rappelez-vous qu'une propriété personnalisée contient une simple chaîne : elle n'est validée qu'à l'usage, une faute passe donc inaperçue, d'où l'intérêt d'une valeur de repli var() sur les propriétés critiques.

Les variables CSS chez BeBranded

Chez BeBranded, nous pilotons couleur, espacement et typographie par des propriétés personnalisées, pour qu'une marque évolue depuis une seule source de vérité et reste cohérente sur chaque page et composant. Cela fait partie du front-end évolutif et basé sur les tokens de notre travail de design.