Il faut user de centaines de propriétés elles-mêmes complétées par un ensemble de valeurs possibles. C’est dans ces interconnexions, qu’inévitablement, les erreurs arrivent. Et ceci, sans compter les risques d’erreurs liés à la répétition, à l’interprétation ou l’approximation de certaines valeurs.

Les variables sont donc apparues comme une évidence pour suppléer à ces mots, nombres, mesures, couleurs, contenus indéterminés ou pour préparer le cadre du projet. Car, au départ, nous sommes confrontés à de l’abstraction ou à des questions sans réponse. Les variables remplissent donc bien leur rôle, car elles permettent de tester un ensemble de situations par l’intermédiaire de valeurs uniques remplaçables.

Lorsqu’il faut élaborer et maintenir des produits web (site ou application) qui font appel à de nombreux paramètres (tailles, couleurs, positions…), il est compliqué, voire impossible, de s’en passer. Surtout quand le moindre composant ou module n’a, au départ du projet, aucune des caractéristiques physiques de leur évolution finale.

Avant 2016, il n’était pas possible d’utiliser de variables CSS sans utiliser de pseudo-langages (Sass, Less, Stylus ou Scss…). Ceux-ci sont apparus 10 ans plus tôt et permettaient déjà de simplifier les contraintes liées à la répétition dans l’écriture des CSS. L’unique inconvénient est que leur lecture directe est impossible. A l’époque, l’informatique n’était pas aussi puissante qu’aujourd’hui, les navigateurs étaient de simples lecteurs de contenu parfois dépendant du système (comme IE par exemple).

La compilation en CSS était dès lors obligatoire pour créer le résultat lisible de nos variables. Ce qui sous-en-tend un bon nombre d’erreurs de rafraîchissement liées au stockage des valeurs dans le cache.

Si l’ébauche des variables CSS débute certainement avant 2012, son statut de candidat à la recomman-dation ne sera finalisé qu’en juin 2016 alors que son implémentation est déjà présente chez Firefox depuis juillet 2014. Quant au support actuel, il est de 95%. On peut toujours envisager de continuer avec des pseudo-langages pour atteindre les 100%, mais c’est oublier l’utilité de cette variable directement dans la mémoire du navigateur. Elle peut être recalcu-lée, modifiée ou même remplacée sans devoir être réinterprétée. Dans le cas de theming, de templating, elle peut être standardisée pour faciliter son assi-milation ou sa réutilisation. Elle peut ainsi s’adapter directement à un contexte lui-même variable avec des opérations CSS [calc(), minmax(), repeat()…] ou indirectement avec du JavaScript.

On regrettera juste l’impossibilité de pouvoir l’utiliser en paramètre d’une media-querie. Une énorme lacune aux vues de la variété grandissante des supports, alors que la prise en charge de ces paramètres est native dans tous les anciens pseudo langages (Sass, Less, Scss…).

https://codepen.io/gfiche/pen/ZEepGRR

Heureusement, il est possible de garder le meilleur des deux mondes : Scss (Saas, less ou autre) quand c’est indispensable et les variables CSS le reste du temps…

https://codepen.io/gfiche/pen/dyMzoYN