Les variables CSS sont des outils extrêmement utiles pour centraliser et réutiliser des valeurs de style. Elles permettent de définir une valeur une seule fois, puis de la réutiliser dans toute la feuille de style. Cette fonctionnalité apporte de nombreux avantages en termes de maintenabilité et de flexibilité. Dans cet article, nous allons voir en détail comment créer et utiliser des variables CSS. Nous aborderons leur syntaxe, les types de valeurs qu’elles acceptent et les cas d’usage les plus courants. L’objectif est de vous donner toutes les clés pour tirer le maximum des variables CSS dans vos projets.
Qu’est-ce qu’une variable css ?
Le concept de variable existe depuis les débuts de l’informatique. En programmation, une variable permet de stocker une valeur (chaîne de caractères, nombre, booléen…) et de la réutiliser plus tard. On évite ainsi les répétitions en centralisant les valeurs importantes.
Les variables CSS s’appuient sur ce même principe éprouvé, mais appliqué aux feuilles de style web.
Ainsi, une variable CSS, aussi appelée propriété personnalisée, permet de stocker une valeur stylistique (couleur, taille de police, etc.) dans un seul et unique endroit, puis de réutiliser cette valeur autant de fois que nécessaire dans une feuille de style.
Concrètement, on va déclarer la variable en lui donnant un nom explicite. Par exemple, on peut créer une variable nommée « –couleur-principale » pour y stocker un code couleur hexadécimal.
On définit la variable à un seul endroit, mais on peut ensuite réutiliser son nom partout dans le CSS à la place de la valeur qu’elle contient. Ainsi, plutôt que de copier-coller le même code couleur à de multiples endroits, on fait appel à la variable par son nom.
L’intérêt majeur est que si on décide de modifier la valeur de cette variable, la mise à jour se répercutera automatiquement sur toutes les occurrences dans le CSS. On évite ainsi les valeurs en dur et on améliore considérablement la maintenabilité du code.
Les variables CSS apportent donc flexibilité et modularité. Elles permettent de centraliser les valeurs stylistiques et de les réutiliser facilement. C’est un outil puissant pour les feuilles de style complexes.
Pourquoi créer une variable css ?
L’utilisation de variables CSS présente de nombreux avantages, que nous allons passer en revue :
- Maintenabilité accrue. Centraliser les valeurs stylistiques dans des variables rend la maintenance du code plus facile. En effet, si une mise à jour visuelle est nécessaire, elle peut se faire en un seul endroit au lieu de devoir modifier toutes les occurrences de cette valeur.
- Flexibilité améliorée. Avoir des variables permet de changer facilement l’apparence d’un site web, par exemple en basculant entre différents thèmes, simplement en modifiant les valeurs de référence dans les variables.
- Lisibilité renforcée. Le code est plus limpide quand il contient des variables explicites plutôt que des valeurs en dur difficiles à appréhender. Les variables dotées de noms parlants améliorent la compréhension du CSS.
- Réutilisation simplifiée. On peut réutiliser une même valeur autant de fois que nécessaire en faisant appel à sa variable associée, ce qui évite des répétitions fastidieuses.
- Cohérence garantie. Les variables assurent une cohérence visuelle en permettant de réutiliser les mêmes couleurs, tailles, etc. Le risque d’incohérence est ainsi minimisé grâce à ces valeurs centralisées.
- Adaptation facilitée. En changeant une simple variable, on peut modifier toutes les occurrences associées, ce qui est pratique pour l’adaptation responsive ou les modes sombre/clair, par exemple.
- Ciblage aisé. Il est possible de définir des variables avec une portée globale ou locale pour cibler uniquement certains éléments. Cette capacité de scope offre plus de contrôle.
- Architecture rationalisée. Les variables CSS participent à une architecture front-end plus modulaire et rationalisée en externalisant les valeurs.
En résumé, les variables apportent de nombreux bénéfices en termes de maintenabilité, de flexibilité, de lisibilité et de cohérence. Ce sont des outils essentiels pour toute feuille de style d’une certaine ampleur.
Comment créer une variable en css ?
La syntaxe pour créer une propriété personnalisée CSS est simple :
--nom-variable: valeur;
On débute par deux tirets `–` suivis du nom que l’on souhaite donner à la variable. Les noms de variables ne doivent contenir que des lettres, des chiffres, des tirets (-) ou des underscores (_).
On termine par un `:` pour séparer le nom de la valeur désirée, le tout finalisé par un `;`.
Par exemple, pour créer une variable de couleur principale :
--couleur-principale: #DD4B39;Pour illustrer en conditions réelles, Voici deux exemples de variables CSS dans une feuille de style plus fournie :
Exemple 1 : Variables pour les couleurs d’un site
:root {
/* Couleurs principales */
--bleu-fonce: #06183a;
--bleu-clair: #a2d5f2;
--blanc: #fff;
/* Couleurs secondaires */
--gris-fonce: #555;
--gris-clair: #eee;
/* Couleurs d'accent */
--rouge: #d41313;
--vert: #17bf63;
}
/* Utilisation des variables */
body {
background-color: var(--blanc);
color: var(--gris-fonce);
}
h1, h2 {
color: var(--bleu-fonce);
}
button {
background-color: var(--vert);
color: var(--blanc);
}Exemple 2 : Variables typographiques
:root {
/* Tailles de texte */
--taille-texte: 1rem;
--taille-titre: 2.25rem;
/* Graisses de texte */
--reguliere: 400;
--demi-gras: 600;
/* Interlignage */
--interligne: 1.5;
/* Famille de polices */
--police: 'Work Sans', sans-serif;
}
/* Utilisation des variables */
body {
font-size: var(--taille-texte);
font-family: var(--police);
line-height: var(--interligne);
}
h1 {
font-size: var(--taille-titre);
font-weight: var(--demi-gras);
}Que peut-on mettre dans une variable css ?
On peut mettre différents types de valeurs dans les propriétés personnalisées, comme des :
- Couleurs, avec les noms de couleurs, les valeurs RVB, hexadecimales, etc.
- Tailles, avec différentes unités comme les px, rem, em, pourcentages…
- Polices, pour définir la typographie par défaut d’un projet.
- Graisses de caractères, avec des valeurs numériques.
- Espacements, comme des marges, paddings ou interlignes.
- Bordures, pour en définir la largeur, le style et la couleur.
- Ombres portées, avec des valeurs pour la transpiration, l’étalement, etc.
- Et même des images, en utilisant la fonction url() dans la variable.
En réalité, les possibilités sont vastes pour centraliser différents types de styles dans des variables CSS ! Les possibilités sont quasiment infinies.
Quelle compatibilité avec les navigateurs ?
Les variables CSS sont maintenant très largement supportées par les navigateurs modernes.
Voici un aperçu du support par les principaux navigateurs (et leur version) :
– Chrome 49+
– Firefox 31+
– Safari 9.1+
– Edge 15+
– Opera 36+
Les propriétés personnalisées CSS sont donc prises en charge par les versions récentes des navigateurs majeurs. Chrome, Firefox, Safari et Edge sont compatibles depuis plusieurs années déjà.
Aujourd’hui, leur support étant très large, les propriétés personnalisées CSS peuvent être utilisées en toute confiance pour la plupart des projets web.
Conclusion
Les variables CSS sont décidément des outils indispensables pour tout développeur soucieux de la maintenabilité et de la modularité de son code. Leur syntaxe simple permet de centraliser facilement tous types de valeurs stylistiques.
Les possibilités offertes par les variables couvrent un large spectre. Couleurs, tailles, espacements, polices… rien n’échappe à leur portée. Combinées à des préprocesseurs CSS, elles fonctionnent désormais sur tous les navigateurs.
Les variables ont le pouvoir de simplifier considérablement l’écriture et la maintenance des feuilles de style. Elles ouvrent la voie à des systèmes de design plus flexibles et cohérents. De nouveaux frameworks CSS comme Tailwind CSS poussent d’ailleurs leur usage à l’extrême.
