Tutoriel sur l’utilisation des variables CSS

21 avril 2025
Astuces

Les variables CSS (ou propriétés personnalisées) sont un outil puissant qui permet de simplifier la gestion des styles d’un site web. Elles offrent une façon dynamique et centralisée de définir et de réutiliser des valeurs dans votre CSS, ce qui améliore la cohérence du design et facilite les mises à jour. Dans ce tutoriel, nous vous expliquerons comment utiliser les variables CSS efficacement et vous montrerons des exemples pratiques.

Qu’est-ce qu’une variable CSS ?

Une variable CSS est une propriété personnalisée définie par l’utilisateur qui peut être utilisée partout dans le fichier CSS. Elle est déclarée avec la syntaxe –nom-de-la-variable et appelée avec var().

Quels sont les avantages des variables CSS ?

Cohérence dans le design :

Les variables CSS permettent de définir des valeurs uniques pour les couleurs, les polices, les espacements, et autres propriétés récurrentes. En utilisant une variable unique pour une propriété comme une couleur primaire, vous vous assurez que cette couleur reste cohérente dans l’ensemble de votre site.

Maintenance simplifiée

L’un des plus grands avantages des variables CSS est leur capacité à centraliser les valeurs. Cela simplifie grandement la maintenance, car une modification unique peut se répercuter sur tout le projet.

Réutilisabilité et modularité

Les variables CSS encouragent un design modulaire, où des composants ou sections du site peuvent réutiliser des variables préexistantes, ce qui rend les styles plus prévisibles et évite la redondance dans le code.

Flexibilité et personnalisation dynamique

Les variables CSS permettent une personnalisation dynamique des styles en temps réel, souvent via JavaScript ou des changements d’attributs. Cela est particulièrement utile pour des fonctionnalités comme le changement de thème ou l’adaptation à différents contextes utilisateur.

Compatibilité avec les fonctions CSS avancées

Les variables CSS s’intègrent parfaitement aux fonctions CSS comme calc(), clamp(), et min(), permettant de créer des styles dynamiques et adaptatifs sans recourir à JavaScript.

Accessibilité accrue

Les variables CSS permettent d’ajuster les styles pour améliorer l’accessibilité en fonction des préférences de l’utilisateur, comme le contraste élevé ou la taille des polices.

Syntaxe de base des variables CSS

Déclaration d’une variable

Les variables sont déclarées à l’intérieur d’un bloc de règles, généralement dans le pseudo-sélecteur :root pour les rendre globales :

:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}

Utilisation d’une variable

Pour utiliser une variable, vous utilisez la fonction var() :

h1 {
color: var(--primary-color);
font-size: var(--font-size);
}
p {
color: var(--secondary-color);
}

Étendue des variables CSS

Variables globales

Les variables définies dans :root sont accessibles dans tout le document :

:root {
  --background-color: #f4f4f4;
}

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

Variables locales

Les variables peuvent aussi être définies à l’intérieur d’un sélecteur spécifique, ce qui limite leur portée :

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

.card-special {
  --card-padding: 30px; /* Redéfinition locale */
  padding: var(--card-padding);
}

Valeurs par défaut avec var()

Vous pouvez définir une valeur par défaut pour une variable grâce à un second argument dans var(). Cela est utile pour éviter des erreurs si une variable n’a pas été initialisée.

color: var(--text-color, #333); /* Utilise --text-color ou #333 si non défini */
}

Utilisation avancée des variables CSS

Variables et mode sombre

Les variables CSS simplifient la gestion des thèmes comme le mode clair/sombre :

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #ffffff;
}

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

Vous pouvez basculer entre les thèmes en modifiant l’attribut data-theme via JavaScript.

Variables dans des calculs

Les variables peuvent être utilisées dans des fonctions CSS comme calc() :

:root {
  --base-size: 10px;
}

div {
  padding: calc(2 * var(--base-size));
}

Bonnes pratiques pour l’utilisation des variables CSS

Organisez vos variables : Classez-les en groupes logiques comme couleurs, typographie, ou espacement.

:root {
  /* Couleurs */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;

  /* Typographie */
  --font-size: 16px;
  --heading-font: 'Roboto', sans-serif;

  /* Espacement */
  --padding-small: 10px;
  --padding-large: 20px;
}

Préfixez vos variables : Utilisez des préfixes pour éviter les conflits (par exemple, –btn-primary-color pour les boutons).
Évitez les redondances : Si une valeur est utilisée plusieurs fois, définissez-la dans une variable au lieu de la répéter.
Testez les compatibilités : Les variables CSS sont supportées par tous les navigateurs modernes, mais pas par les très anciens (comme Internet Explorer).

Outils pour travailler avec les variables CSS

Inspecteur du navigateur : Les outils de développement des navigateurs permettent d’afficher et de modifier les variables CSS en temps réel.
Préprocesseurs CSS (Sass, Less) : Bien que Sass et Less offrent des fonctionnalités similaires avec leurs propres variables, vous pouvez les combiner avec les variables CSS pour encore plus de flexibilité.
Plugins de gestion des thèmes : Certains plugins ou bibliothèques comme Tailwind CSS utilisent déjà des variables CSS pour gérer les thèmes.

Exemple pratique : Création d’un thème de site

Voici un exemple de site utilisant des variables CSS pour une gestion centralisée du design.
CSS

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #f4f4f4;
  --text-color: #333;
  --font-size: 16px;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: var(--font-size);
}

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

button {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Site avec variables CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Bienvenue sur mon site</h1>
  <p>Ceci est un exemple d'utilisation des variables CSS.</p>
  <button>Appuyez ici</button>
</body>
</html>

Le mot de la fin

En suivant ce tutoriel et en appliquant les bonnes pratiques, vous pouvez transformer votre workflow CSS et améliorer significativement la qualité de vos projets. Pour des thèmes, des calculs dynamiques ou une maintenance simplifiée, les variables CSS représentent une avancée majeure dans la conception web. Elles simplifient la gestion des styles en offrant une solution centralisée, cohérente et flexible.