Variables CSS, organisation du code et nommage BEM

Votre feuille de style grossit : une couleur utilisée à vingt endroits, des espaces recopiés partout, des noms de classes qui ne veulent plus rien dire au bout d’une semaine. Avant que cela devienne ingérable, il est temps d’adopter trois outils : les variables CSS pour ne plus répéter les valeurs, une organisation claire du fichier, et une convention de nommage pour vos classes. Au programme de cette leçon : rendre le CSS du portfolio de Camille propre et facile à faire évoluer.

Le problème de la répétition

Regardez le portfolio tel que nous l’avons écrit : la couleur #1d4e5f apparaît dans les titres, les liens, les boutons, la bordure des cartes. Si Camille décide un jour de changer de couleur principale, il faudra retrouver et modifier chaque occurrence, avec le risque d’en oublier une. Les propriétés personnalisées CSS, souvent appelées « variables CSS », règlent ce problème.

Déclarer et utiliser une variable

Une variable CSS se déclare avec un nom commençant par deux tirets, et s’utilise avec la fonction var() :

:root {
  --couleur-principale: #1d4e5f;
  --couleur-accent: #e0a96d;
  --couleur-fond: #fafaf7;
  --couleur-texte: #222222;
  --espace: 1rem;
  --rayon: 12px;
}

h1, h2, h3, a {
  color: var(--couleur-principale);
}

.carte {
  padding: var(--espace);
  border-radius: var(--rayon);
}

La pseudo-classe :root désigne l’élément racine (html) : les variables qui y sont déclarées sont disponibles partout dans la page. Une seule modification de --couleur-principale met à jour tout le site.

Valeur de secours

Le second argument de var() est une valeur par défaut, utilisée si la variable n’existe pas :

.bouton {
  background-color: var(--couleur-bouton, var(--couleur-principale));
}

Des variables qui se redéfinissent localement

Contrairement aux variables des préprocesseurs, les variables CSS sont vivantes : elles suivent la cascade et l’héritage, et elles peuvent être redéfinies sur n’importe quel élément. Un composant peut ainsi modifier localement une valeur pour ses descendants :

.carte-vedette {
  --couleur-principale: #7a3b1d;
}

Tous les titres et liens situés dans cette carte utiliseront la nouvelle teinte, sans écrire de règle supplémentaire.

Un thème sombre en quelques lignes

Comme les variables sont redéfinissables, un thème alternatif devient très simple. On redéfinit uniquement les variables concernées dans une media query :

@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #14181a;
    --couleur-texte: #ececec;
    --couleur-principale: #8ec5d6;
  }
}

Si vous proposez un thème sombre, vérifiez les contrastes dans les deux thèmes, et pensez aux images et aux ombres qui peuvent nécessiter des ajustements.

Organiser sa feuille de style

Un seul fichier peut très bien suffire pour un site simple, à condition de le ranger. Une organisation courante va du plus général au plus particulier :

1. Variables : toutes les valeurs de conception (couleurs, espaces, rayons, tailles de texte) ;
2. Réinitialisation et base : box-sizing, marges du body, styles des éléments nus (h1, a, img) ;
3. Mise en page : conteneurs, grilles, en-tête, pied de page ;
4. Composants : cartes, boutons, formulaires, étiquettes ;
5. Utilitaires : petites classes à usage unique (masquer visuellement, centrer le texte) ;
6. Media queries : placées soit avec chaque composant, soit regroupées à la fin.

Séparez ces parties par des commentaires bien visibles :

/* ==========================================
   1. VARIABLES
   ========================================== */

/* ==========================================
   2. BASE
   ========================================== */

Quand le projet grandit, vous pouvez découper la feuille en plusieurs fichiers (base.css, layout.css, components.css) et les relier successivement dans le head, en respectant l’ordre. Ne vous précipitez pas : un fichier bien ordonné vaut mieux que dix fichiers désordonnés.

Nommer ses classes avec BEM

Un bon nom de classe décrit ce qu’est l’élément, pas son apparence : .carte-projet survivra à un changement de design, alors que .cadre-bleu-arrondi deviendra faux. Pour structurer les noms, la méthode BEM (Block, Element, Modifier) est très répandue. Elle s’appuie sur trois notions :

• Bloc : un composant autonome (carte, menu, bouton) ;
• Élément : une partie du bloc, qui n’a pas de sens en dehors de lui, notée avec deux soulignés (carte__titre, carte__image) ;
• Modificateur : une variante du bloc ou de l’élément, notée avec deux tirets (carte--vedette, bouton--secondaire).

<article class="carte carte--vedette">
  <img class="carte__image" src="images/projets/alpes.jpg" alt="Sommets enneigés" width="800" height="533">
  <h3 class="carte__titre">Les Alpes en hiver</h3>
  <p class="carte__texte">Une série réalisée sur trois semaines.</p>
  <a class="bouton bouton--secondaire" href="#">Voir le projet</a>
</article>

.carte { background: white; padding: var(--espace); }
.carte__titre { margin-top: 0; }
.carte__image { width: 100%; height: auto; }
.carte--vedette { border: 2px solid var(--couleur-accent); }

Les avantages sont concrets : on comprend la structure en lisant le HTML, tous les sélecteurs ont la même faible spécificité (une classe), il n’y a pas de conflit entre composants, et un élément peut être déplacé sans casser le style, puisque son nom ne dépend pas de sa position dans le DOM.

L’imbrication CSS native, avec prudence

Le CSS moderne permet d’imbriquer des règles les unes dans les autres, une fonctionnalité autrefois réservée aux préprocesseurs :

.carte {
  padding: var(--espace);

  & h3 {
    margin-top: 0;
  }

  &:hover {
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
  }
}

Le symbole & représente le sélecteur parent. Cette syntaxe est prise en charge par les navigateurs récents, mais elle est plus jeune que le reste du CSS : un navigateur ancien l’ignorerait, et toutes les règles imbriquées seraient perdues. Avant de l’utiliser, vérifiez la compatibilité (la documentation MDN indique les navigateurs concernés pour chaque fonctionnalité) et décidez si cela est acceptable pour votre public. Pour un premier site, rester sur du CSS « à plat » est plus sûr. Gardez aussi une imbrication peu profonde : trois niveaux au maximum, sinon on retrouve le problème de la spécificité trop élevée.

Gérer la compatibilité : une règle générale

Avant d’adopter une nouvelle fonctionnalité CSS, posez-vous trois questions : est-elle prise en charge par les navigateurs que mes visiteurs utilisent probablement ? Que se passe-t-il pour ceux qui ne la comprennent pas ? Existe-t-il une alternative sûre ? Le CSS est conçu pour être tolérant : une propriété inconnue est ignorée. Vous pouvez donc écrire une valeur de base fiable, puis une valeur plus récente qui la remplace dans les navigateurs capables de la comprendre.

.titre {
  font-size: 2rem;                      /* valeur de secours */
  font-size: clamp(2rem, 5vw, 3.5rem);  /* valeur moderne, prise si comprise */
}

Appliquer le tout au portfolio

Voici la tête de la feuille de style de Camille après réorganisation :

/* 1. VARIABLES */
:root {
  --couleur-principale: #1d4e5f;
  --couleur-accent: #e0a96d;
  --couleur-fond: #fafaf7;
  --couleur-texte: #222222;
  --espace: 1rem;
  --rayon: 12px;
}

/* 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
}
img { max-width: 100%; height: auto; }

/* 3. COMPOSANTS */
.carte { … }
.carte__titre { … }

À vous de jouer

Refactorisez votre propre feuille de style :

1. repérez toutes les valeurs répétées (couleurs, espaces, rayons) et déplacez-les dans :root sous forme de variables ;
2. remplacez chaque occurrence par var(--nom) ;
3. renommez les classes de la carte de projet selon BEM (carte, carte__titre, carte--vedette) ;
4. ajoutez des commentaires de section ;
5. facultatif : écrivez un thème sombre en redéfinissant uniquement vos variables de couleur.

:root {
  --couleur-principale: #1d4e5f;
  --couleur-accent: #e0a96d;
  --couleur-fond: #fafaf7;
  --couleur-texte: #222222;
  --espace: 1rem;
  --rayon: 12px;
}

body { color: var(--couleur-texte); background: var(--couleur-fond); }
h1, h2, h3, a { color: var(--couleur-principale); }

.carte {
  background: white;
  border-radius: var(--rayon);
  padding: var(--espace);
}
.carte__titre { margin-top: 0; }
.carte--vedette { border: 2px solid var(--couleur-accent); }

@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #14181a;
    --couleur-texte: #ececec;
    --couleur-principale: #8ec5d6;
  }
}

Dans la prochaine leçon, vous vous assurez que votre site est utilisable par tous : accessibilité et navigation au clavier.