09 - Les variables CSS

Les variables CSS, également connues sous le nom de propriétés personnalisées, sont un moyen puissant de réutiliser des valeurs spécifiques partout dans votre feuille de style. Elles facilitent la maintenance et la mise à jour de vos styles.

Introduction

Définition d'une Variable CSS

Pour définir une variable CSS, vous utilisez la syntaxe --nomDeLaVariable: valeur;. Les variables CSS sont généralement définies au sein du sélecteur :root, qui les rend accessibles globalement sur l'ensemble de votre page web.

:root {
  --main-bg-color: coral;
  --text-color: #333;
}

Utilisation d'une Variable CSS

Pour utiliser une variable CSS, vous utilisez la fonction var(--nomDeLaVariable).

body {
  background-color: var(--main-bg-color);
  color: var(--text-color);
}

Exemple Complet

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --main-color: green;
        --accent-color: orange;
      }

      body {
        background-color: var(--main-color);
        color: var(--accent-color);
      }

      a {
        background-color: var(--accent-color);
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>Mon titre</h1>
    <a>Mon lien</a>
  </body>
</html>

Avantages

Premièrement, elles apportent une consistance à votre design, un peu comme si vous aviez un chef d'orchestre qui s'assure que chaque partie de votre site web joue la même mélodie harmonieuse.

Pas besoin de fouiller dans des lignes de code interminables, changez simplement une variable et c’est fait !