Variables CSS et design tokens : une charte graphique que vous changez en quelques lignes

Une couleur change dans la charte, et vous voilà à chercher le même code hexadécimal dans toute la feuille de style, avec le risque d'en oublier un au passage. Les variables CSS règlent ce problème à la racine : une valeur déclarée une fois, appelée partout, modifiée en une seule ligne. Ce cours va plus loin que la syntaxe. Il montre comment nommer ses variables, les redéfinir localement pour créer des variantes de composants, puis les organiser en deux niveaux, tokens primitifs et tokens sémantiques, jusqu'à un fichier modèle complet que vous réutiliserez sur chaque nouveau projet.

Variables CSS et design tokens : ce que vous saurez faire

Chaque notion est montrée sur une page réelle, avec un titre, un bouton, un lien et un badge qui partagent la même couleur.

• Sécuriser un style avec une valeur de secours dans var()
• Choisir un nom de variable qui dit le rôle, pas la valeur
• Créer une variante de section sans dupliquer une seule règle
• Définir le contrat de variables d'un bloc BEM et le redéfinir par modificateur
• Séparer la palette brute des rôles fonctionnels avec deux niveaux de tokens
• Changer toute une charte graphique en modifiant une poignée de lignes
• Démarrer un projet avec une feuille de style modèle déjà structurée

Portée des variables : pourquoi l'ordre des règles ne change rien

Une variable déclarée dans :root vaut pour toute la page, mais rien n'empêche de la redéclarer dans une section précise. Le cours le montre sur deux sections, l'une par défaut, l'autre promotionnelle : la même variable, redéfinie en local, recolore le titre et le bouton de la seule section concernée. Déplacer la règle avant ou après dans le fichier ne change rien au résultat, et c'est précisément ce que beaucoup ne comprennent pas en découvrant les variables CSS. La portée suit le DOM, pas l'ordre d'écriture, ce qui n'a rien à voir avec le comportement d'une variable Sass.

Contrat de variables d'un composant BEM et variantes

Le même mécanisme s'applique à un composant. Une carte déclare ses propres variables, fond, texte et couleur d'accent : c'est son contrat. Les modificateurs dark et warning de la carte ne font que redéfinir ce contrat, sans toucher à une seule propriété du bloc ni de ses éléments. Ajouter une variante revient alors à écrire trois lignes. Cette façon de faire prolonge directement le nommage bloc, élément, modificateur vu dans le cours sur la méthode BEM.

Tokens primitifs, tokens sémantiques et fichier modele-style.css

Une variable nommée color-blue qui contient de l'orange, c'est le genre d'incohérence qui s'installe au fil des retouches. La réponse est une couche supplémentaire : des primitives qui stockent les valeurs brutes de la palette, et des tokens sémantiques, comme color-danger ou color-text-inverse, qui s'y réfèrent et portent un rôle dans l'interface. La dernière partie enrichit le fichier modèle commencé dans l'épisode sur la cascade et les layers : gammes de couleurs neutral, blue, green, red et orange graduées de 50 à 900, typographie, tailles, graisses, espacements, rayons et ombres, puis les tokens sémantiques pour les états, les surfaces, les textes et les bordures. Ce fichier de plus de 200 lignes est fourni avec le cours.

Pour qui

Le badge Intermédiaire correspond au contenu : vous écrivez déjà du CSS sans aide et vous connaissez le principe d'une variable dans un langage de programmation. C'est le quatrième épisode d'une série sur le CSS moderne. Il suppose connus le nommage BEM et les couches @layer, posés dans les épisodes précédents ; si le nesting natif vous est encore étranger, l'épisode sur le nesting CSS et BEM se suit juste avant. Uniquement du CSS natif, sans préprocesseur, écrit dans Visual Studio Code et testé dans un navigateur à jour. Le dark mode n'est pas traité ici, la dernière vidéo en donne seulement un aperçu.

Pour aller plus loin

Si vous cherchez seulement la syntaxe des variables CSS et leur lecture depuis le HTML ou jQuery, sans l'architecture en tokens, le même formateur propose un cours plus court et de niveau débutant : Simplifiez votre CSS grâce aux variables. Si vous visez un cadre certifiant avec un mentor, Carl Brison encadre aussi la formation Développeur Web Front-End éligible CPF, dont ce cours peut compléter le volet CSS.