Vous l'avez peut-être déjà vu passer sur des libres-services, mais le root, c'est quoi ?

C'est une sorte de banque de données de couleurs, qui centralise toutes les informations au même endroit.

Prenons un exemple concret. Vous voulez faire une mise à jour mais vous vous rendez-compte que vous avez huit teintes de rouges, trois de gris, et que franchement, les changer une par une quand vous faites une mise à jour, c'est l'enfer sur Terre. Point de panique, le root est là pour vous simplifier la tâche.
Vous allez pouvoir renseigner dans votre CSS :

Code:

:root
--rouge1:#512c2c;
--rouge2:#bb2b2b;
--noir:#000000; {
}

Etc, etc, etc. Ainsi, toutes les couleurs de votre forum se trouveront ici. D'accord, c'est bien, mais comment ça s'utilise maintenant ? Là encore, c'est très simple, ça n'est qu'un coup de main à prendre.

Exemple :
Vous voulez mettre le texte du votre page d'accueil dans cette merveilleuse couleur rouge bordeaux renseignée dans votre root. Le code se présentera ainsi :

Code:

color:var(--rouge1);

Ce qui appliquera la couleur renseignée dans le root (le code html correspondant à "rouge1" : #512c2c) à cette balise. Ca fonctionne également avec un background :

Code:

background:var(--rouge1);

En faisant ceci, les mises à jour sont un peu plus rapides, car vous n'avez qu'à changer la valeur renseignée dans le root. Exemple, vous voulez changer tous les rouges bordeaux en vert ? Rien de plus simple, il vous suffit de changer le code couleur qui correpond à "rouge1". Ainsi :

Code:

--rouge1:#512c2c;

Deviendra :

Code:

--rouge1:#2bbb77;

Et tous les endroits qui ont la variable "var(--rouge1)" prendront donc la nouvelle couleur renseignée.
Et voilà, fini les mises à jour interminables à traquer toutes les couleurs manquantes, maintenant ça prendra beaucoup moins de temps !

Enjoy