Module 3Aller plus loin
Chapitre 13 sur 15
Variables, fonctions et organisation du code
Factoriser et organiser son CSS : variables, fonctions, base moderne, BEM et @layer.
- ≈ 165 min
- 7 leçons
- 3 vidéos
- 3 exercices
Module 3Aller plus loin
Chapitre 13 sur 15
Factoriser et organiser son CSS : variables, fonctions, base moderne, BEM et @layer.
Objectifs
Avec ce chapitre, tu sauras…
--nom et var() ;calc(), min(), max(), clamp(), var() ;@layer.Un CSS de 50 lignes se maintient tout seul. Un CSS de 3 000 lignes écrit à plusieurs, non : les couleurs sont répétées cent fois avec de légères différences, personne n'ose supprimer une règle, et chaque correction en casse une autre. Ce chapitre te donne les outils et les méthodes pour écrire un CSS qui dure.
Leçon 1
:root {
--couleur-principale: #2f5bc4;
--couleur-fonce: #17306e;
--couleur-texte: #1d2433;
--couleur-fond: #ffffff;
--rayon: 10px;
--espace: 1rem;
--police-titres: "Poppins", sans-serif;
}
h2 {
color: var(--couleur-fonce);
font-family: var(--police-titres);
}
.bouton {
background-color: var(--couleur-principale);
border-radius: var(--rayon);
padding: calc(var(--espace) / 2) var(--espace);
}
.carte {
border-radius: var(--rayon);
padding: calc(var(--espace) * 1.5);
}Tableau: Ce qu'il faut savoir sur les variables
| Règle | Exemple |
|---|---|
| le nom est sensible à la casse | --Bleu et --bleu sont deux variables différentes |
| une valeur de secours si la variable n'existe pas | color: var(--accent, #2f5bc4); |
| les variables s'héritent et peuvent être redéfinies localement | .carte-promo { --couleur-principale: #c0392b; } |
| elles peuvent changer dans une media query | @media (min-width: 768px) { :root { --espace: 1.5rem; } } |
| on ne peut pas les utiliser dans le sélecteur ou le nom d'une media query | @media (min-width: var(--md)) ne marche pas |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 2
Leçon 3
| Fonction | Rôle | Exemple |
|---|---|---|
var() | lire une variable | var(--espace) |
calc() | calculer en mélangeant les unités | calc(100vh - 80px) |
min() / max() | la plus petite / plus grande valeur | width: min(100% - 2rem, 1100px) |
clamp() | une valeur bornée et fluide |
Leçon 4
Leçon 5
Leçon 6
Leçon 7
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
1Une variable CSS s'écrit…
2Pour lire une variable :
3Où déclare-t-on une variable globale ?
4En BEM, .menu__lien--actif est…
5Pourquoi ajoute-t-on font: inherit aux champs de formulaire ?
6Une valeur de secours s'écrit…
L'essentiel du chapitre
:root { --nom: valeur; } puis var(--nom, secours). Elles s'héritent et se redéfinissent (thème sombre, media queries).calc(), min(), max(), clamp(), var(), attr(), color-mix().box-sizing: border-box, marges à zéro, médias en max-width: 100%, font: inherit sur les champs..bloc, .bloc__element, .bloc--modificateur : une classe par sélecteur, spécificité basse.&, couches @layer. Outils : Prettier, Stylelint.font-size: clamp(1rem, 2.5vw, 1.25rem) |
url() | un fichier | background-image: url("../images/motif.svg") |
attr() | la valeur d'un attribut (dans content) | content: attr(href) |
linear-gradient() | un dégradé | chapitre 6 |
rgb(), hsl() | une couleur | chapitre 4 |
color-mix() | mélanger deux couleurs | color-mix(in srgb, var(--accent), black 20%) |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Le chapitre « Variables » de Dave Gray (anglais) : les propriétés personnalisées en détail.
:root {
--fond: #ffffff;
--texte: #1d2433;
--carte: #f4f6fb;
--accent: #2f5bc4;
}
@media (prefers-color-scheme: dark) {
:root {
--fond: #0f172a;
--texte: #e2e8f0;
--carte: #1e293b;
--accent: #7aa2ff;
}
}
body {
background-color: var(--fond);
color: var(--texte);
}
.carte {
background-color: var(--carte);
}
a {
color: var(--accent);
}<div style="font-family:Inter,sans-serif;font-size:8.5pt">
<div style="display:inline-block;width:46%;vertical-align:top;background:#ffffff;color:#1d2433;border:1px solid #dde3ee;padding:8px;border-radius:6px;margin-right:3%"><b style="color:#1d2433">Thème clair</b><div style="background:#f4f6fb;padding:6px;margin-top:5px;border-radius:5px">Carte · <span style="color:#2f5bc4;text-decoration:underline">un lien</span></div></div><div style="display:inline-block;width:46%;vertical-align:top;background:#0f172a;color:#e2e8f0;padding:8px;border-radius:6px;border:1px solid #0f172a"><b style="color:#e2e8f0">Thème sombre</b><div style="background:#1e293b;padding:6px;margin-top:5px;border-radius:5px">Carte · <span style="color:#7aa2ff;text-decoration:underline">un lien</span></div></div>
</div>Pour laisser l'utilisateur choisir, on redéfinit les variables sur un attribut, par exemple [data-theme="dark"] { --fond: #0f172a; ... }, et quelques lignes de JavaScript ajoutent data-theme="dark" sur la balise <html> au clic. Le CSS, lui, ne change pas.
Tableau: Les fonctions à connaître
Tout projet commence par quelques règles qui neutralisent les styles par défaut gênants et posent des fondations saines.
/* 1. Des tailles prévisibles */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Pas de marges imprévues */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0;
}
/* 3. Un corps de page lisible */
body {
min-height: 100vh;
line-height: 1.6;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* 4. Des titres plus serrés */
h1, h2, h3, h4 {
line-height: 1.2;
text-wrap: balance; /* lignes de titre équilibrées */
}
/* 5. Des médias qui ne débordent jamais */
img, picture, video, svg {
display: block;
max-width: 100%;
height: auto;
}
/* 6. Les champs héritent de la police */
input, button, textarea, select {
font: inherit;
}
/* 7. Un défilement doux vers les ancres, sauf si on réduit les animations */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}Par défaut, les <input>, <button> et <textarea> n'héritent pas de la police de la page : ils utilisent celle du système, plus petite. C'est pour cela que la règle 6 (font: inherit) est dans toutes les bases CSS.
Organise ton fichier du plus général au plus particulier, en sections commentées :
:root)body, h1, a, img).texte-centre, .sr-only)/* ==========================================================
1. VARIABLES
========================================================== */
:root { /* ... */ }
/* ==========================================================
2. BASE
========================================================== */
body { /* ... */ }
/* ==========================================================
3. MISE EN PAGE
========================================================== */
.conteneur { /* ... */ }
/* ==========================================================
4. COMPOSANTS
========================================================== */
.bouton { /* ... */ }
.carte { /* ... */ }Pour un gros projet, on sépare ces sections en plusieurs fichiers (variables.css, base.css, composants/bouton.css…), regroupés par un outil de construction ou par des @import en tête d'un fichier principal.
BEM (Block, Element, Modifier) est une convention de nommage des classes. Un bloc est un composant autonome (.carte). Un élément est une partie du bloc, écrite avec deux tirets bas (.carte__titre). Un modificateur est une variante, écrite avec deux tirets (.carte--promo).
<article class="carte carte--promo">
<img class="carte__image" src="tajine.jpg" alt="Tajine de Safi" width="300" height="200">
<h3 class="carte__titre">Tajine de Safi</h3>
<p class="carte__prix">280 DH</p>
<a class="bouton bouton--petit" href="#">Voir</a>
</article>.carte { border-radius: var(--rayon); padding: var(--espace); }
.carte__image { border-radius: calc(var(--rayon) - 4px); }
.carte__titre { font-size: 1.125rem; }
.carte__prix { font-weight: 700; }
.carte--promo { border: 2px solid #c0392b; }Avec BEM, chaque sélecteur est une seule classe : la spécificité est toujours (0, 1, 0), donc aucun conflit de spécificité (chapitre 3). En lisant carte__prix, tu sais immédiatement que la classe appartient au composant carte, et tu peux la modifier sans peur de casser autre chose.
.carte {
padding: 1rem;
& h3 { /* équivaut à .carte h3 */
margin-bottom: 0.5rem;
}
&:hover { /* équivaut à .carte:hover */
transform: translateY(-4px);
}
@media (min-width: 768px) {
padding: 1.5rem;
}
}@layer base, composants, utilitaires;
@layer base {
a { color: var(--accent); }
}
@layer utilitaires {
.texte-centre { text-align: center; }
}Avec @layer, une règle d'une couche déclarée plus tard gagne toujours, quelle que soit la spécificité. Les utilitaires l'emportent sur les composants sans !important. C'est l'outil moderne pour remplacer la « guerre de spécificité » du chapitre 3.
Le chapitre « Organization » de Dave Gray (anglais) : comment organiser le CSS d'un projet. Compare sa méthode avec la section 5.
En entreprise, le CSS est vérifié automatiquement : Prettier pour la mise en forme, Stylelint pour détecter les erreurs et faire respecter les conventions (nommage BEM, pas d'id, pas de !important). Beaucoup d'équipes utilisent aussi un préprocesseur (Sass) ou un framework (Tailwind CSS, Bootstrap) : ils reposent tous sur les notions de cette formation.
Renomme les classes de ce code avec la méthode BEM et réécris le CSS avec une seule classe par sélecteur.
<div class="profil grand">
<img class="photo">
<div class="infos"><h3 class="nom">Sara</h3><p class="role">Designer</p></div>
</div>.profil .photo { border-radius: 50%; }
.profil .infos .nom { font-weight: 700; }
.profil .infos .role { color: gray; }
.profil.grand { padding: 2rem; }Remplace toutes les couleurs, les rayons de bordure et les espacements de ton CV par des variables déclarées dans :root : au moins quatre couleurs, deux espacements, un rayon et une police. Vérifie qu'en changeant --couleur-principale, tout le site change.
Ajoute à ton CV un thème sombre automatique avec prefers-color-scheme, en ne redéfinissant que des variables. Teste-le dans les DevTools : menu ⋮ → More tools → Rendering → Emulate CSS media feature prefers-color-scheme: dark.
Le chapitre « Functions » de Dave Gray (anglais) : les fonctions CSS avec des exemples concrets.