Chapitre 11 : Variables CSS
Maîtrisez les variables CSS pour créer des styles plus modulaires et maintenables.
1. Qu'est-ce qu'une variable CSS ?
Les variables CSS (aussi appelées Custom Properties) permettent de stocker des valeurs CSS réutilisables. Cela rend votre code plus clair, plus souple, et plus facile à maintenir.
:root {
--couleur-principale: #2e7d32;
}
--couleur-principale: #2e7d32;
}
Ensuite, on l'utilise comme ceci :
body {
background-color: var(--couleur-principale);
}
background-color: var(--couleur-principale);
}
2. Déclaration d'une variable
- Les variables commencent par
-- - On les place souvent dans le sélecteur
:rootpour qu'elles soient globales
Exemple complet :
:root {
--font-size-base: 16px;
--marge-section: 2rem;
--couleur-accent: #388e3c;
}
--font-size-base: 16px;
--marge-section: 2rem;
--couleur-accent: #388e3c;
}
3. Utilisation d'une variable
Pour utiliser une variable, on écrit :
var(--nom-de-la-variable)
Exemple :
h1 {
color: var(--couleur-accent);
margin-bottom: var(--marge-section);
}
color: var(--couleur-accent);
margin-bottom: var(--marge-section);
}
4. Variables locales
Les variables peuvent être définies localement dans un élément ou une classe :
.carte {
--ombre: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: var(--ombre);
}
--ombre: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: var(--ombre);
}
5. Valeur par défaut avec var()
On peut fournir une valeur de secours si la variable n'existe pas :
color: var(--couleur-inconnue, #000);
6. Exemple de thème avec variables CSS
:root {
--fond: #ffffff;
--texte: #222222;
}
[data-theme="dark"] {
--fond: #121212;
--texte: #e0e0e0;
}
body {
background: var(--fond);
color: var(--texte);
}
--fond: #ffffff;
--texte: #222222;
}
[data-theme="dark"] {
--fond: #121212;
--texte: #e0e0e0;
}
body {
background: var(--fond);
color: var(--texte);
}
Il suffit ensuite de changer l'attribut data-theme pour passer du thème clair au thème sombre.
7. Bonnes pratiques
- Définir les variables globales dans
:root - Utiliser des noms explicites :
--taille-titre,--espacement-standard - Utiliser
var()avec une valeur de secours
8. À éviter
- Déclarer trop de variables inutiles
- Utiliser des noms vagues comme
--xou--valeur - Oublier qu'une variable peut être surchargée dans un élément enfant
9. Exercice pratique
Objectif : Créer une carte stylisée avec des variables CSS globales.
HTML :
<div class="carte">
<h2>Titre de la carte</h2>
<p>Contenu de la carte avec un style cohérent grâce aux variables.</p>
</div>
<h2>Titre de la carte</h2>
<p>Contenu de la carte avec un style cohérent grâce aux variables.</p>
</div>
CSS :
:root {
--fond-carte: #e8f5e9;
--bordure-carte: #66bb6a;
--marge-carte: 1.5rem;
--rayon-carte: 10px;
}
.carte {
background: var(--fond-carte);
border: 2px solid var(--bordure-carte);
padding: var(--marge-carte);
border-radius: var(--rayon-carte);
}
--fond-carte: #e8f5e9;
--bordure-carte: #66bb6a;
--marge-carte: 1.5rem;
--rayon-carte: 10px;
}
.carte {
background: var(--fond-carte);
border: 2px solid var(--bordure-carte);
padding: var(--marge-carte);
border-radius: var(--rayon-carte);
}
10. À retenir
- Les variables CSS rendent votre code plus souple et réutilisable
- Déclarez-les dans
:rootpour les rendre globales - Utilisez
var()partout où des valeurs peuvent être partagées