Les variables, c'est quoi ?
On est flemmards, et ça, ça c'est la flemmardise suprême.
Coder en dur
Imagine que tu construis un gratte-ciel. Pour chaque fenêtre, tu
as besoin d'un verre d'un bleu très spécifique. Sans variables, tu
dois commander chaque vitre individuellement en précisant la
couleur à chaque fois. Si, à la fin du chantier, l'architecte
décide que le bleu doit être un peu plus foncé, tu dois démonter
et remplacer chaque vitre du bâtiment.
C'est ce qu'on appelle coder en dur. Et on n'aime
pas.
Et du coup on utilise...
Une variable CSS (ou "propriété personnalisée"). C'est une boîte
étiquetée. Au lieu de dire "cette vitre est bleu #0000FF", tu dis
"cette vitre utilise la couleur qui est dans la boîte appelée
--couleur-vitre"
En gros c'est comme les styles sur Figma.
Mais pourquoi c'est indispensable ?
Une histoire de vitres
Les Tokens
Les variables permettent de créer des
Design Tokens. En bref, au lieu d'utiliser des
valeurs brutes
( du style: #0000FF ), on utilise des noms
qui ont un sens logique.
- #0000FF n'est qu'une couleur (valeur brute)
- Mais --couleur-vitre est une Intention
Cela permet à une équipe (designers et développeurs) de parler le même langage. On ne demande plus de "mettre le bleu", mais "d'utiliser --couleur-vitre".
En gros c'est indispensable pour ...
- La Maintenance: Tu modifies une seule ligne (le contenu de la boîte) et tout ton site se met à jour instantanément.
- La Cohérence: Tu évites d'avoir 50 nuances de bleu différentes sur ton site par erreur.
- La Lisibilité: Lire « --couleur-vitres » est beaucoup plus facile pour un humain que de lire « color: #0000FF ».
Le Code
Attention à ne pas trop t'égarer ... sinon les variables vont te manger !
Le codage des variables se passe en deux étapes cruciales :
la déclaration (créer la boîte) et
l'appel
(utiliser le contenu).
A. La Déclaration
On déclare généralement les variables dans le sélecteur :root que tu mets en haut de ton CSS. En clair, tout ce qui est mis ici sera accessible partout sur le site.
:root {
--couleur-vitres:
#0000ff;
--background-color:
#3300f3;
}
body {
font-family:
...;
}
B. L'Appel
Pour utiliser ta variable, tu ne peux pas juste écrire son nom. Tu dois utiliser la fonction "outil" appelée var().
.vitre-a-peindre
{
color:
var(--couleur-vitres);
}
Petit Résumé
C'est gratuit
Ce qu'il faut retenir
La syntaxe des variables n'est pas une simple décoration, c'est un protocole strict qui repose sur deux piliers :
- La déclaration des variables: C'est l'acte de création. En utilisant les deux tirets, tu indiques au navigateur : "Ceci n'est pas une propriété standard, c'est une information que je stocke pour plus tard". Le choix du nom est crucial : sois descriptif (ex: --theme-accent plutôt que --couleur1).
- L'appel des variables: C'est la connexion. Sans cette fonction, ta variable est une donnée inutile. var() est le pont qui va chercher la valeur dans le :root pour l'appliquer au design.
Maîtriser la syntaxe, c'est s'assurer que ton code est DRY (Don't Repeat Yourself). Si tu te surprends à copier-coller la même valeur hexadécimale plus de deux fois, tu as fait une erreur de stratégie : crée une variable.
La Logique Avancée
Courage.
1. La Portée (Cascade)
Une variable n'est pas obligée d'être "globale" (:root). Tu peux la déclarer uniquement à l'intérieur d'un élément précis. Si tu redéfinis la valeur de --couleur-vitres dans une classe .card-speciale, tous les enfants à l'intérieur de cette carte utiliseront la nouvelle couleur, mais le reste du site restera inchangé. C'est la force de la cascade.
2. Le Cas Pratique : Le Mode Sombre
C'est l'utilité n°1 aujourd'hui. Au lieu de réécrire 50 sélecteurs pour changer les couleurs en mode nuit, on change juste les valeurs des variables à la racine du document. Clique sur l'icône lune dans le navigation drawer et regarde le résultat !
body.dark-theme
{
--couleur-vitres:
#0000ff;
--text:
#ffffff;
}
3. Les calculs dynamiques
Le CSS moderne permet de mélanger les variables avec la fonction
calc(). Cela permet de créer des mises
en page ultra-flexibles. Par exemple, créer un espacement qui est
toujours le triple de ta variable de base :
.vitres-a-peindre
{
padding:
calc(var(
--padding-vitre
) * 3);
}
Le Boss de fin
Si jamais tu n'y arrives pas, pas de panique, c'est normal. ça arrive à tout le monde que certaines choses soient au-dessus de leur capacités. Il faut juste connaître ses limites. Pas comme ce texte.
Défis à tester :
- Change --ma-couleur par du orange (#ff9500).
- Passe --radius à 0px pour un look brutaliste.
- Ajoute une variable d'ombre de 0 10px 20px rgba(0,0,0,0.5); et applique-la à la carte.
- Pour réinitialiser, relance la page !
La Carte.
Toutes les propriétés dépendent des variables à gauche.
Territoire Inconnu
Fais ce qui te fait plaisir, amuse-toi (abuse pas quand même...).