Structurer les styles avec des variables

Dans une page, les mêmes couleurs et espacements reviennent souvent. Si vous devez corriger une teinte à plusieurs endroits, modifier chaque règle séparément est lent et peut produire des incohérences. Les variables CSS vous permettent de nommer ces valeurs, puis de les réutiliser dans toute votre feuille de style.

Vous savez déjà cibler les éléments avec des sélecteurs de type, de classe, d’identifiant et de descendant : ces règles servent ici à appliquer les valeurs centralisées à l’en-tête, aux horaires, aux conseils et au contact. La page HTML de l’atelier reste la même ; vous allez organiser les valeurs dans `style.css`.

Une propriété personnalisée CSS est une valeur que vous définissez vous-même, avec un nom qui commence par deux tirets, par exemple `--couleur-principale`. La convention consiste à regrouper les variables communes dans le sélecteur `:root`, qui représente la racine du document. Vous pouvez ainsi les retrouver rapidement au début de votre feuille de style et les réutiliser dans les règles qui suivent.

:root {
    /* Couleurs de la page de l'atelier */
    --couleur-principale: #356b3f;
    --couleur-texte: #243027;
    --couleur-fond: #f5f3e8;
    --couleur-accent: #d99b35;

    /* Espacements réutilisés */
    --espace-petit: 0.5rem;
    --espace-moyen: 1rem;
    --espace-grand: 2rem;
}

Les noms choisis décrivent leur rôle plutôt que leur apparence précise. Ainsi, `--couleur-principale` reste compréhensible même si vous remplacez ensuite le vert par une autre teinte. Les valeurs d’espacement sont exprimées en `rem` ; vous avez déjà rencontré les unités CSS dans la leçon consacrée aux couleurs et aux unités.

Pour utiliser une propriété personnalisée dans une déclaration, appelez-la avec la fonction `var()`. Le code suivant applique la palette et les espacements à différentes parties de la page de présentation. Les classes indiquées doivent correspondre à celles présentes dans votre HTML.

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

header {
    background-color: var(--couleur-principale);
    color: #ffffff;
    padding: var(--espace-grand);
}

.horaires {
    margin-top: var(--espace-grand);
    padding: var(--espace-moyen);
}

.conseil {
    border-left: 4px solid var(--couleur-accent);
    padding: var(--espace-petit) var(--espace-moyen);
}

.contact {
    background-color: var(--couleur-principale);
    color: #ffffff;
    padding: var(--espace-moyen);
}

La fonction `var()` reçoit le nom de la propriété personnalisée, sans guillemets. Dans cet exemple, la couleur principale est utilisée à la fois dans l’en-tête et dans le bloc de contact ; les deux zones partagent donc la même valeur. Les espacements nommés rendent également les écarts plus cohérents d’un bloc à l’autre.

Une erreur fréquente consiste à utiliser un nom qui n’a pas été déclaré, ou à le recopier avec une faute. Dans ce cas, la déclaration qui dépend de cette variable ne fournit pas de valeur CSS valide. Vous pouvez prévoir une valeur de remplacement dans `var()` ; elle sera utilisée si la variable n’est pas disponible.

.conseil {
    border-left: 4px solid var(--couleur-accent, #d99b35);
}

Ici, `#d99b35` sert de valeur de remplacement si `--couleur-accent` n’est pas définie. Cette précaution peut éviter qu’une règle perde sa couleur, mais elle ne remplace pas la vérification du nom et de la déclaration dans `:root`.

• Déclarez une propriété personnalisée avec un nom commençant par `--`, de préférence dans `:root` pour une valeur partagée.
• Réutilisez cette valeur avec `var(--nom-de-la-variable)` dans les déclarations CSS.
• Centralisez les couleurs et espacements afin de les ajuster en un seul endroit et de conserver une présentation cohérente.
• Vous pouvez fournir une valeur de remplacement dans `var()` si la variable appelée n’est pas disponible.

Dans la prochaine leçon, vous verrez comment le modèle de boîte explique l’espace occupé par chaque élément et l’effet des espacements déjà utilisés ici.