Créer des variables CSS de conception

Quand une même couleur ou un même espacement est recopié dans plusieurs règles, une modification de la charte devient une recherche manuelle à risque. Vous allez centraliser ces valeurs dans des variables CSS, puis les réutiliser dans l’en-tête, les horaires, les conseils et le contact de l’atelier.

La leçon sur la cartographie des règles vous a appris à distinguer les responsabilités des styles ; les conflits entre couches étudiés juste avant rappellent pourquoi il faut aussi limiter les ajustements dispersés. Ici, vous ne changez pas l’organisation des composants : vous donnez des noms stables aux valeurs répétées et les branchez sur les règles existantes.

Déclarer les valeurs communes

Une propriété personnalisée CSS est une déclaration dont le nom commence par deux tirets, par exemple --couleur-accent. Vous pouvez définir ces propriétés dans le sélecteur :root, puis en demander la valeur avec var(). Pour cette page, choisissez des noms qui indiquent l’usage attendu : une couleur de texte, une couleur d’accent, un espace entre sections ou un espace intérieur de carte.

:root {
    --couleur-texte: #24312a;
    --couleur-fond: #fffdf7;
    --couleur-accent: #28613f;
    --couleur-accent-clair: #e7f0e8;
    --couleur-bordure: #cbd6cc;

    --espace-petit: 0.5rem;
    --espace-standard: 1rem;
    --espace-section: 2.5rem;
    --espace-carte: 1.5rem;
}

body {
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-family: Arial, sans-serif;
}

.site-header {
    border-bottom: 2px solid var(--couleur-accent);
    padding: var(--espace-standard) var(--espace-section);
}

.horaires {
    margin-block: var(--espace-section);
    padding: var(--espace-carte);
    border: 1px solid var(--couleur-bordure);
    background-color: var(--couleur-accent-clair);
}

.conseils {
    margin-block: var(--espace-section);
}

.contact {
    margin-block-start: var(--espace-section);
    padding: var(--espace-carte);
    color: var(--couleur-fond);
    background-color: var(--couleur-accent);
}

.contact a {
    color: inherit;
}

Dans cet exemple, l’accent vert est utilisé pour la bordure de l’en-tête et le fond du contact. L’espacement de section est partagé par les horaires, les conseils et le contact : modifier --espace-section ajuste ces trois zones sans rechercher chaque déclaration. La valeur de --couleur-fond sert aussi à rendre le texte du contact lisible sur son fond accentué.

Choisir des noms utiles et remplacer sans risque

Un nom de variable doit aider à comprendre la décision de conception sans obliger à connaître son code hexadécimal ou sa valeur exacte. --couleur-accent explique mieux son rôle dans la page que --vert-fonce ; --espace-section est plus parlant que --taille-40. Gardez une convention régulière : un préfixe descriptif, puis une indication de couleur ou d’espacement et, si nécessaire, son usage.

Le remplacement doit être progressif et vérifiable. Recherchez d’abord une valeur qui apparaît plusieurs fois et correspond réellement à la même intention ; remplacez seulement ces occurrences, puis contrôlez la page dans le navigateur. Deux espaces visuellement proches ne sont pas automatiquement interchangeables : un petit écart entre un titre et son texte n’a pas nécessairement la même fonction qu’une séparation entre deux zones de page.

Prévoir une valeur de repli

La fonction var() accepte une deuxième valeur qui sert de repli si la propriété personnalisée demandée n’est pas définie. Cette précaution est utile dans une feuille en cours de migration ou lorsqu’une règle dépend d’une variable qui pourrait être absente. La valeur de repli doit rester adaptée à la propriété qui la reçoit ; pour une couleur, choisissez une couleur, et pour un espacement, une longueur valide.

.conseils__titre {
    color: var(--couleur-accent, #28613f);
    margin-block-end: var(--espace-petit, 0.5rem);
}

Si --couleur-accent est disponible, le titre prend sa valeur ; sinon, le navigateur utilise la couleur indiquée après la virgule. Vous pouvez adopter la même forme pour un espacement, mais évitez de recopier partout des valeurs de repli différentes : elles rendraient les modifications moins prévisibles. Une variable définie correctement dans la feuille reste la source habituelle ; le repli constitue une sécurité, pas un second système de conception.

À retenir

• Déclarez les propriétés personnalisées communes dans :root et réutilisez-les avec var().
• Nommez les variables selon leur intention, par exemple --couleur-accent ou --espace-section.
• Centralisez d’abord les valeurs répétées qui représentent réellement la même décision de conception.
• Utilisez une valeur de repli adaptée dans var(), sans en faire un doublon incohérent de la variable centrale.
• Après chaque série de remplacements, vérifiez le rendu des zones concernées dans la page de l’atelier.

Dans la leçon suivante, vous ferez évoluer ces variables en tenant compte de leur portée et de leur héritage, sans casser les composants existants.