Les variables en CSS

Les variables CSS vous en rêviez elles sont là, certes depuis un petit bout de temps, mais elles sont surtout supportées par la très grande majorité des navigateurs, comme noté dans caniuse.

Pourquoi utiliser des variables dans son CSS ?

Déjà a quoi sert une variable dans n’importe quel langage informatique ?
C’est une information stocker dans la mémoire qui peut être instancié puis être utilisé une ou plusieurs fois dans le code.

Si vous n’aviez pas encore d’étoiles dans vos yeux je continue l’explication par un exemple concret.
Cela mis en application dans votre CSS vous permettra par exemple de stocker vos couleurs. vous ouvrez votre fichier .css et vous pouvez noter ceci :

:root {
  --couleur-principal: #fff;
  --couleur-secondaire: #2c2c2c;
}

Et l’avantage c’est, et ça vous est déjà arrivé d’essayer de rechercher une couleur dans vos lignes CSS, et pour les moins perfectionnistes d’entre nous , mettre une couleur approximative.
Et bien là grâce aux variables, fini ce problème il vous suffit de l’invoquer de cette manière.

.maClass{
  background-color : var(--couleur-principal);
  color : var(--couleur-principal);
}

Certain utilisait même des pré-processeurs comme SASS juste pour utiliser des variables.

Utiliser les variables CSS

Hors les couleurs, d’autres valeurs peuvent être utilisées telles que des tailles pour vos espacements par exemple et tout ça bien cumulable.
Vous pouvez créer des variables de couleur, de la taille de votre contour, du type de ligne. Puis invoquer ces variables dans la déclaration d’une bordure.

:root{
--ligne: solid;
--couleur: #000;
--contour: 2px;
}

.maClass{
border : var(--contour) var(--ligne) var(--couleur);
}

:root sélecteur global

C’est par convention on utilise le sélecteur :root vous trouverez ce sélecteur aussi bien sur Bootstrap ou WordPress. Car c’est un sélecteur qui se trouve à la racine du document.
Les variables sont donc accessibles aussi bien sur le sélecteur « body » ou même « html ».
Vous pouvez très bien déclarer vos variables ailleurs comme dans le « header » par exemple, mais cela perd de son intérêt et si votre CSS doit être partagé à d’autres peuvent entrainer de la confusion.

Conclusion

La démocratisation des variables est vraiment une révolution dans l’utilisation du CSS.
Cela permet de gagner un temps considérable d’appliquer son code couleur en une fois, la taille de ses marges … Mais surtout cela apporte de la rigueur à l’intégration de la maquette en gardant les mêmes valeurs sur tout le document.