Tout savoir sur les variables CSS (custom properties)

Les variables CSS ont révolutionné la manière de gérer les styles dans le développement web.

Si vous en avez assez de répéter les mêmes valeurs CSS partout dans votre code, alors cet article est fait pour vous !

Vous allez découvrir ici comment les utiliser efficacement, pourquoi elles sont si pratiques et comment elles se comparent aux solutions comme Sass et LESS.

Allons-y !

Qu'est-ce qu'une variable CSS ?

Une variable CSS (aussi appelée "propriété personnalisée") est un moyen de stocker des valeurs réutilisables dans votre feuille de style.

Imaginez-la comme une boîte où vous pouvez ranger une couleur, une taille de police ou n'importe quelle autre valeur CSS, puis la réutiliser où vous le souhaitez.

Comment déclarer et utiliser des variables CSS ?

Déclarer une variable CSS

Les variables CSS sont généralement définies au sein du sélecteur :root.

Ce sélecteur représente le niveau le plus élevé de votre document et les variables ainsi définies seront accessibles partout dans votre fichier CSS.

:root { 
  --main-color: #3498db;
  --font-size: 16px;
}

Dans cet exemple, deux variables sont créées : --main-color et --font-size.

Elles sont définies respectivement avec une couleur et une taille de police.

Utiliser une variable CSS

Pour utiliser une variable, vous devez appeler la fonction var().

Celle-ci prend le nom de la variable en argument et l'injecte dans les propriétés CSS que vous souhaitez modifier.

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

Ici, var(--main-color) applique la couleur principale définie à l'arrière-plan du body, tandis que var(--font-size) ajuste la taille du texte.

Variables CSS avec des valeurs de secours

Vous pouvez également fournir une valeur de secours (fallback) à une variable CSS.

C'est utile au cas où la variable ne serait pas définie ou si le navigateur ne la supportait pas.

body {
  color: var(--text-color, #333);
}

Dans cet exemple, si la variable --text-color n'est pas définie, la couleur par défaut #333 sera appliquée.

Réutilisation dans différents éléments

Les variables CSS peuvent être réutilisées sur plusieurs éléments.

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

p {
  border-color: var(--main-color);
}

En utilisant la même variable sur différents éléments (comme h1 et p), vous assurez une cohérence visuelle tout en simplifiant les modifications futures.

Nous reviendrons justement sur les raisons d'utiliser les variables CSS dans la section suivante.

Modifier une variable CSS pour des sections précises

L'un des aspects les plus puissants des variables CSS est qu'elles peuvent être redéfinies localement pour des sections spécifiques de votre page.

Vous n'êtes pas limité à une seule valeur globale.

Par exemple, si vous souhaitez changer la couleur principale dans une certaine section de votre site, vous pouvez le faire en redéfinissant la variable uniquement pour cette partie.

.section-1 { 
  --main-color: #d32f2c;
}

.section-2 { 
  --main-color: #3fcef2; 
}

Ensuite, dans vos styles, vous utilisez toujours var(--main-color) comme d'habitude, mais la valeur s'adaptera en fonction de la section où elle est utilisée :

.section-1 h1 { 
  color: var(--main-color); /* Couleur rouge */
}

.section-2 h1 {
  color: var(--main-color); /* Couleur cyan */ 
}

Grâce à cette flexibilité, vous pouvez facilement adapter le design de différentes sections de votre page sans devoir réécrire tout votre code CSS.

Pourquoi utiliser les variables CSS ?

Maintenant que vous savez comment créer et utiliser les variables CSS, vous en voyez tout le potentiel et la puissance.

Je tiens toutefois à souligner pourquoi, selon moi, elles sont indispensables dans la création de styles CSS.

Centralisation des styles

Plutôt que de répéter les mêmes valeurs partout dans votre code, les variables CSS vous permettent de centraliser des éléments récurrents comme les couleurs, les polices ou les espacements.

Ainsi, si vous devez modifier une valeur, vous n'avez qu'à la changer à un seul endroit, et l'ensemble de votre site sera mis à jour.

Un vrai gain de temps, surtout pour les projets de grande envergure.

Faciliter la maintenance

Les variables CSS améliorent considérablement la lisibilité et la maintenance de votre code.

Par exemple, au lieu de chercher chaque occurrence d'une couleur pour la changer, vous modifiez simplement la valeur de la variable.

C'est également très pratique si vous travaillez en équipe : chacun peut rapidement comprendre et ajuster les styles sans risquer d'oublier une valeur cachée quelque part dans le CSS.

Thématisation simplifiée

Si vous souhaitez proposer plusieurs thèmes de couleur ou de design pour un site, les variables CSS sont parfaites pour cela.

Vous pouvez déclarer différentes valeurs pour vos variables en fonction du thème sélectionné, et tout bascule automatiquement sans effort supplémentaire, ouvrant ainsi la porte à des interfaces utilisateur facilement personnalisables.

J'aborderai ce sujet plus en profondeur un peu plus loin dans l'article.

Compatibilité et flexibilité

Les variables CSS sont compatibles avec la plupart des navigateurs modernes, ce qui signifie que vous pouvez les utiliser dès maintenant dans vos projets sans vous soucier des problèmes de compatibilité.

Les variables CSS sont un atout majeur pour tout développeur souhaitant optimiser son flux de travail, réduire les erreurs et créer des designs évolutifs.

Elles apportent une réponse simple et élégante à la complexité croissante des feuilles de style dans les projets modernes.

Variables CSS et préprocesseurs (Sass, LESS) (Comparaison)

Les variables CSS et les préprocesseurs comme Sass et LESS permettent tous deux de gérer des valeurs réutilisables dans vos styles, mais ils présentent des différences majeures.

Support natif vs compilation

Les variables CSS sont directement comprises par les navigateurs modernes.

Pas besoin de compiler quoi que ce soit : vous les déclarez dans votre CSS et elles fonctionnent immédiatement.

En revanche, avec Sass et LESS, il faut compiler le code pour obtenir un fichier CSS utilisable.

Flexibilité en temps réel

Les variables CSS peuvent également être modifiées en temps réel, par exemple via JavaScript, ce qui les rend parfaites pour des thèmes dynamiques ou des interactions utilisateur.

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

En comparaison, avec Sass et LESS, les variables sont statiques : une fois le code compilé, vous ne pouvez plus modifier ces valeurs sans recompiler les fichiers.

Quand utiliser les variables CSS ou un préprocesseur

Je vous conseille d'utiliser uniquement un fichier CSS avec des variables CSS pour des pages statiques ou de petite envergure, car elles suffisent amplement dans ces cas-là.

Mais pour des projets plus vastes et structurés, l'utilisation d'un préprocesseur reste souvent plus intéressante.

Heureusement, il est possible de combiner les deux approches en utilisant des variables CSS au sein même de vos fichiers Sass ou LESS, ce qui permet de profiter du meilleur des deux mondes : la flexibilité des variables CSS et la puissance des préprocesseurs.

Gestion des thèmes avec les variables CSS

Que vous souhaitiez implémenter un mode clair et un mode sombre, ou bien proposer plusieurs variations de couleurs, les variables CSS vous permettent de gérer cela efficacement sans réécrire l'intégralité de votre feuille de style.

Déclaration des variables globales

Tout commence par la déclaration de vos variables globales dans le sélecteur :root.

:root {
  --primary-color: #3498db;
  --background-color: #ffffff;
  --text-color: #333333;
}

Ces variables peuvent ensuite être utilisées dans vos styles réguliers.

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

button {
  background-color: var(--primary-color);
}

Changer de thème via la redéfinition des variables

Pour appliquer un thème alternatif, comme un mode sombre, il suffit de redéfinir les valeurs des variables CSS dans une classe spécifique, par exemple .dark-theme.

.dark-theme {
  --primary-color: #e74c3c;
  --background-color: #2c3e50;
  --text-color: #ecf0f1;
}

Ensuite, vous pouvez appliquer cette classe au niveau du body ou d'une autre balise englobante dans votre HTML, et tous les styles qui utilisent ces variables seront mis à jour automatiquement, sans avoir à dupliquer votre code CSS.

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

Gestion multi-thèmes facile

Vous pouvez créer autant de thèmes que nécessaire, en modifiant simplement les valeurs de ces variables CSS pour chaque classe de thème.

Par exemple, si vous souhaitez ajouter un thème clair, vous définissez simplement une autre classe avec des valeurs différentes :

.light-theme {
  --primary-color: #3498db;
  --background-color: #ffffff;
  --text-color: #333333;
}

Cela vous permet de basculer entre plusieurs thèmes très facilement, uniquement en changeant la classe appliquée sur l'élément racine.

Pour aller plus loin dans la gestion des thèmes, vous pouvez consulter cet article sur les modes d'apparence Light mode et Dark mode.

Bonnes pratiques pour l'utilisation des variables CSS

L'utilisation des variables CSS est un excellent moyen de rendre votre code plus propre, maintenable et flexible.

Toutefois, pour en tirer le meilleur parti, il est essentiel de suivre quelques bonnes pratiques.

Voici quelques conseils pour utiliser les variables CSS de manière optimale.

Déclarez vos variables dans :root

Comme mentionné précédemment, pour maximiser la portée de vos variables, il est conseillé de les déclarer dans le sélecteur :root.

Ainsi, elles seront accessibles dans tout le document et pourront être réutilisées partout.

:root {
  --primary-color: #3498db;
  --font-size-base: 16px;
}

Utilisez des noms de variables explicites

Choisir des noms de variables clairs et explicites est essentiel pour rendre votre code facile à comprendre et à maintenir.

Par exemple, préférez --primary-color plutôt que --color1, ce qui permet à quiconque lit votre code de comprendre immédiatement à quoi correspond la variable.

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

Des noms explicites facilitent également les ajustements futurs.

Utilisez des variables pour les valeurs répétitives

Les variables CSS sont particulièrement utiles pour les valeurs que vous utilisez fréquemment, comme les couleurs, les tailles de police, ou les espacements.

:root {
  --spacing-unit: 16px;
}

.container {
  padding: var(--spacing-unit);
}

.card {
  margin-bottom: var(--spacing-unit);
}

Regroupez vos variables par type

Pour une meilleure organisation, regroupez vos variables par type, comme les couleurs, les tailles de police ou les espacements. Cela vous permettra de structurer votre fichier CSS de manière plus lisible et d'y revenir plus facilement pour faire des modifications.

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

  /* Tailles de police */
  --font-size-base: 16px;
  --font-size-large: 24px;

  /* Espacements */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 32px;
}

Préparez des valeurs de secours

Il est toujours recommandé de fournir une valeur de secours dans vos déclarations var(), surtout si vous travaillez avec des variables CSS qui pourraient ne pas être définies dans certains contextes.

button {
  background-color: var(--primary-color, #3498db);
}

Dans cet exemple, si --primary-color n'est pas définie, la valeur #3498db sera utilisée à la place.

Limitez l'utilisation excessive de variables

Bien que les variables CSS soient très utiles, il est important de ne pas en abuser.

Évitez de créer une variable pour chaque petite valeur.

Concentrez-vous sur les éléments qui sont susceptibles de changer ou qui sont utilisés fréquemment à travers votre code.

Trop de variables peuvent rendre votre fichier CSS difficile à gérer.

Conclusion

Les variables CSS ont véritablement transformé la manière de gérer les styles dans le développement web moderne.

Elles apportent une flexibilité et une simplicité inégalées, permettant de centraliser et de modifier des valeurs globales sans dupliquer le code.

Que ce soit pour la gestion des couleurs, des tailles de police, ou même pour des thèmes dynamiques, elles offrent un moyen puissant de rendre votre CSS plus maintenable.