Faire évoluer les variables sans casser les composants

Une couleur ou un espacement peut être utilisé à plusieurs endroits sur la page de l’atelier. Si chaque règle contient directement sa valeur, une évolution de la palette vous oblige à rechercher et modifier plusieurs déclarations, avec un risque d’incohérence. Vous allez organiser les variables pour pouvoir changer les valeurs partagées sans réécrire les styles qui les utilisent.

Vous avez déjà déclaré des variables de conception dans la leçon précédente. Ici, vous allez vous concentrer sur leur évolution : une valeur brute décrit une ressource, tandis qu’une variable de rôle indique l’usage attendu de cette ressource. Cette distinction évite de lier chaque règle à un nom de couleur précis.

Distinguer les valeurs des rôles

Dans l’exemple, --vert-feuille est une valeur de palette, et --couleur-accent décrit un rôle dans l’interface. Les règles qui affichent un accent utilisent le rôle, pas directement la valeur brute. Si la palette change, vous pouvez donc associer le rôle à une autre valeur sans retoucher les déclarations du titre ou du lien.

:root {
    /* Valeurs brutes de la palette */
    --vert-feuille: #286447;
    --creme-pale: #f5f1e6;
    --terre-foncee: #49372b;

    /* Rôles utilisés dans la page */
    --couleur-accent: var(--vert-feuille);
    --couleur-surface: var(--creme-pale);
    --couleur-texte: var(--terre-foncee);
    --espace-page: 1.5rem;
}

.page-atelier {
    color: var(--couleur-texte);
    background-color: var(--couleur-surface);
    padding: var(--espace-page);
}

.page-atelier h1,
.page-atelier a {
    color: var(--couleur-accent);
}

Les propriétés personnalisées définies sur :root sont disponibles dans l’arbre du document et peuvent être héritées par les descendants. Ainsi, .page-atelier peut utiliser les rôles définis à la racine sans les redéclarer. Quand vous changez la valeur associée à --couleur-accent, les éléments concernés suivent ce changement au prochain calcul des styles.

Surcharger une variable à l’endroit utile

Une variable n’est pas obligée d’avoir la même valeur partout. Vous pouvez redéfinir un rôle sur un élément parent précis ; ses descendants héritent alors de cette valeur, tandis que les autres zones gardent celle définie plus haut. C’est utile pour donner au bloc de contact une surface différente sans modifier les horaires ou les conseils pratiques.

.bloc-contact {
    --couleur-accent: var(--terre-foncee);
    --couleur-surface: #e6eee7;

    color: var(--couleur-texte);
    background-color: var(--couleur-surface);
    padding: var(--espace-page);
}

.bloc-contact a {
    color: var(--couleur-accent);
}

Dans ce cas, le lien du bloc de contact prend la couleur terre foncée, et son fond devient vert pâle. Le titre et les liens de la page qui ne se trouvent pas dans ce bloc conservent l’accent défini sur :root. La surcharge reste locale : vous n’avez pas besoin de recopier toutes les valeurs de conception ni de modifier les règles des autres zones.

Faire évoluer la palette sans effet de surprise

Pour assombrir l’accent de toute la page, changez uniquement son association à la racine. Les règles qui consomment --couleur-accent restent inchangées ; le bloc de contact garde sa surcharge locale. Vous pouvez également modifier une valeur brute partagée, à condition de vérifier les rôles qui en dépendent : une même couleur peut servir à plusieurs usages et ne pas convenir à chacun après le changement.

:root {
    --vert-feuille: #214f3a;
    --couleur-accent: var(--vert-feuille);
}

.bloc-contact {
    --couleur-accent: var(--terre-foncee);
}

La cascade détermine quelle déclaration s’applique lorsque plusieurs règles définissent la même variable au même endroit. Une redéfinition locale ne signifie donc pas qu’elle gagne toujours face à une règle concurrente : tenez compte de l’ordre de cascade déjà établi dans votre feuille. Pour isoler un problème, inspectez l’élément concerné dans les outils du navigateur et vérifiez la valeur calculée de la propriété personnalisée ainsi que la déclaration qui l’a fournie.

À retenir

• Séparez les valeurs brutes de palette des variables qui décrivent leur rôle dans l’interface.
• Définissez les rôles partagés à un emplacement commun pour les faire évoluer sans retoucher chaque règle.
• Redéfinissez localement un rôle lorsque seule une zone, comme le bloc de contact, doit présenter une variation.
• Après une modification partagée, vérifiez les zones qui consomment les rôles concernés et contrôlez les valeurs calculées.

Dans la prochaine leçon, vous définirez une convention de nommage locale pour organiser les sélecteurs et les règles de vos composants.