Variables

Les variables CSS (propriétés personnalisées) permettent de stocker des valeurs réutilisables, facilitant ainsi la mise à jour et la maintenance des styles.

Déclarer les variables dans le sélecteur :root et les préfixer avec -- :

:root {
  --blue-color: #3f42f3;
}

Une fois la variable déclarée, il est possible de l'appliquer à n'importe quelle propriété CSS à l'aide de la fonction var(). Par exemple, pour attribuer à la propriété color d’un élément <h1> la valeur de la variable --blue-color, on peut écrire :

h1 {
  color: var(--blue-color);
}

Combinaison de la déclaration et de l’utilisation de variables dans l’exemple suivant :

Dans cet exemple, plusieurs variables contrôlent les couleurs de la carte. La mise à jour d'une seule variable modifie les styles partout où elle est utilisée.

Redéfinition des propriétés

Pour modifier des styles spécifiques au sein d’un composant, redéfinir la même propriété à l’intérieur d’un sélecteur plus spécifique.

Exemple (feu de signalisation) :

La classe de base .signal contient les styles partagés, tandis que .stop, .slow-down et .proceed remplacent les couleurs individuelles.