Définir une convention de nommage locale
Objectif : Écrire des sélecteurs de composants qui ne ciblent pas accidentellement d’autres zones de la page.
Une règle CSS trop générale peut modifier plusieurs zones à la fois : un titre de contact peut recevoir la même marge qu’un titre de conseils, ou tous les paragraphes peuvent hériter d’une couleur qui ne leur convient pas. Sur une feuille de style maintenue dans le temps, ces effets rendent chaque changement plus risqué. Vous allez établir une convention locale de nommage et écrire des sélecteurs qui ne s’appliquent qu’au composant visé.
Vous avez déjà séparé les styles globaux, ceux de mise en page et ceux des composants dans la leçon consacrée à la cartographie des règles. Ici, le travail porte sur le nom des composants et sur la portée de leurs sélecteurs, sans changer le HTML fourni par le projet.
Choisir des noms qui indiquent une responsabilité
Un nom local doit vous permettre de reconnaître la zone concernée sans examiner toute la page. Dans le HTML de référence, atelier-hours désigne le bloc des horaires, tandis que atelier-hours__titre et atelier-hours__liste désignent des parties de ce bloc. Le double trait de soulignement sépare le nom du bloc de celui de son élément ; cette convention est déjà matérialisée par les classes autorisées du projet.
Appliquez cette logique de façon constante : les noms commençant par atelier-header appartiennent à l’en-tête, ceux commençant par atelier-tips aux conseils, et ceux commençant par atelier-contact au contact. Le nom ne décrit pas une apparence passagère comme « vert » ou « grand » ; il indique plutôt le rôle ou la zone à laquelle la règle est destinée. Les noms de classes figurant dans le contrat sont imposés : vous ne créez donc pas de nouvelle classe pour améliorer un sélecteur.
Réduire la portée d’une règle
Un sélecteur comme h2 s’applique à tous les titres de deuxième niveau, même si leurs besoins diffèrent. De même, li touche aussi bien les horaires que les conseils. Pour éviter ces effets de bord, ciblez la classe de l’élément concerné : .atelier-hours__titre ne modifie que le titre des horaires, et .atelier-tips__item ne modifie que les éléments de la liste de conseils.
Un sélecteur composé tel que .atelier-contact .atelier-contact__lien limite également la règle au contact, mais il dépend d’une relation d’ancêtre entre deux éléments. Dans cette page, la classe de l’élément cible suffit : préférez .atelier-contact__lien lorsque son style est autonome. Réservez les sélecteurs composés aux cas où la relation entre les éléments est nécessaire pour exprimer le besoin.
Réunir les règles d’un composant dans style.css
La convention reste utile seulement si vous pouvez retrouver rapidement les règles. Dans l’unique fichier style.css, regroupez les déclarations d’un composant sous un commentaire français, puis passez au composant suivant. Les variables de conception déjà vues servent aux couleurs et aux espacements ; l’exemple ci-dessous réutilise uniquement des variables prévues dans le contrat.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atelier de jardinage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="atelier-page">
<header class="atelier-header">
<p class="atelier-header__sur-titre">Atelier pratique</p>
<h1 class="atelier-header__titre">Jardiner au fil des saisons</h1>
<p class="atelier-header__intro">Apprenez des gestes simples pour cultiver votre jardin.</p>
</header>
<main class="atelier-layout">
<section class="atelier-hours" aria-labelledby="horaires-titre">
<h2 class="atelier-hours__titre" id="horaires-titre">Horaires</h2>
<ul class="atelier-hours__liste">
<li>Lundi au vendredi : 9 h à 17 h</li>
<li>Samedi : 10 h à 14 h</li>
</ul>
<p class="atelier-hours__note">Inscription recommandée avant votre venue.</p>
</section>
<section class="atelier-tips" aria-labelledby="conseils-titre">
<h2 class="atelier-tips__titre" id="conseils-titre">Conseils pratiques</h2>
<ul class="atelier-tips__liste">
<li class="atelier-tips__item">Apportez des gants adaptés.</li>
<li class="atelier-tips__item">Prévoyez une gourde et des chaussures fermées.</li>
<li class="atelier-tips__item">Du matériel est prêté sur place.</li>
</ul>
</section>
<address class="atelier-contact atelier-contact--accent">
<h2 class="atelier-contact__titre">Nous contacter</h2>
<p class="atelier-contact__texte">Une question sur les inscriptions ?</p>
<a class="atelier-contact__lien" href="mailto:[email protected]">[email protected]</a>
</address>
</main>
</div>
</body>
</html>@layer base, layout, components;
@layer base {
:root {
--color-text: #24342c;
--color-surface: #ffffff;
--color-border: #c8d4cb;
--color-accent: #245b3d;
--color-accent-soft: #e8f2e9;
--space-2: 0.5rem;
--space-4: 1rem;
--space-6: 1.5rem;
--content-width: 70rem;
}
body {
margin: 0;
color: var(--color-text);
background: var(--color-surface);
font-family: system-ui, sans-serif;
line-height: 1.5;
}
}
@layer layout {
.atelier-page {
width: min(calc(100% - 2 * var(--space-4)), var(--content-width));
margin-inline: auto;
}
.atelier-header,
.atelier-layout {
padding-block: var(--space-6);
}
.atelier-layout {
display: grid;
gap: var(--space-6);
}
}
@layer components {
/* En-tête : ces règles restent attachées à ses classes. */
.atelier-header__sur-titre {
margin: 0 0 var(--space-2);
color: var(--color-accent);
}
.atelier-header__titre {
margin: 0;
}
.atelier-header__intro {
margin: var(--space-2) 0 0;
}
/* Horaires : aucun sélecteur générique ne touche aux listes voisines. */
.atelier-hours {
padding: var(--space-6);
border: 1px solid var(--color-border);
}
.atelier-hours__titre,
.atelier-tips__titre,
.atelier-contact__titre {
margin: 0 0 var(--space-4);
}
.atelier-hours__liste,
.atelier-tips__liste {
margin: 0;
padding-inline-start: var(--space-6);
}
.atelier-hours__note {
margin: var(--space-4) 0 0;
}
/* Conseils : les éléments de liste sont ciblés par leur classe locale. */
.atelier-tips__item + .atelier-tips__item {
margin-top: var(--space-2);
}
/* Contact : seuls le bloc et ses éléments reçoivent ces styles. */
.atelier-contact {
padding: var(--space-6);
border: 1px solid var(--color-border);
font-style: normal;
}
.atelier-contact--accent {
background: var(--color-accent-soft);
}
.atelier-contact__texte {
margin: 0 0 var(--space-2);
}
.atelier-contact__lien {
color: var(--color-accent);
}
}
@media (min-width: 48rem) {
@layer layout {
.atelier-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.atelier-contact {
grid-column: 1 / -1;
}
}
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Dans la feuille complète, les règles de base, de mise en page et de composants restent réparties dans les couches déclarées précédemment. À l’intérieur de la partie composants, les commentaires forment des repères de maintenance et les sélecteurs reprennent les préfixes présents dans le HTML. Le sélecteur adjacent des conseils ne concerne que deux éléments de cette liste, car chacun porte la classe atelier-tips__item.
Vérifier la portée avant de valider
Après une modification, recherchez dans style.css les sélecteurs élémentaires comme h2, p ou li. Pour chacun, vérifiez s’il doit vraiment toucher tous les éléments de ce type ; sinon, remplacez-le par la classe locale appropriée, sans ajouter de classe absente du contrat. Dans le navigateur, comparez les trois zones : l’en-tête, les horaires et les conseils, puis le contact. Une règle bien nommée doit vous permettre de prévoir précisément quelle zone changera.
À retenir
- Utilisez les préfixes locaux du projet pour repérer le composant visé.
- Ciblez les classes d’élément, comme .atelier-hours__titre, plutôt que tous les éléments HTML du même type.
- Regroupez les règles d’un composant dans style.css et signalez la zone avec un commentaire français.
- Vérifiez qu’une règle générale est réellement nécessaire avant de la conserver.
Dans la prochaine leçon, vous définirez les variantes d’un composant à l’aide de classes explicites, sans confondre son nom local et ses états visuels.