Assembler la structure de production
Objectif : Organiser les règles de l’en-tête, des horaires, des conseils et du contact selon le plan défini.
Une feuille de style peut fonctionner sur chaque zone prise isolément et devenir difficile à modifier dès que ces zones sont réunies. Les changements de l’en-tête risquent alors de perturber les horaires, ou une règle générale de liste de modifier les conseils sans que vous l’ayez prévu.
Dans cette étape du projet, vous réunissez les styles de l’atelier dans style.css et rendez leur organisation lisible. Vous reprenez le squelette HTML de référence sans lui ajouter de classe : l’objectif est de structurer les règles, pas de modifier le contrat du projet.
Conserver une structure de page identifiable
La page conserve son en-tête, puis son contenu principal composé des horaires, des conseils pratiques et du contact. Ces quatre zones ont chacune un rôle distinct. Vous pouvez ainsi leur consacrer des règles ciblées et éviter qu’un style prévu pour un composant ne s’applique à un autre.
Le HTML ci-dessous est complet et reprend les noms de classes autorisés. Enregistrez-le dans index.html. Les identifiants associés aux titres servent aux relations d’accessibilité des sections ; ils ne remplacent pas les classes utilisées par la feuille de style.
<!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>Assembler les règles dans style.css
La feuille suivante regroupe les règles dans un seul fichier et garde une indentation de quatre espaces. Les couches base, layout et components séparent les responsabilités. L’ordre est déclaré en tête du fichier ; pour le détail de la syntaxe et des priorités, reportez-vous à « Déclarer les couches de cascade ».
@layer base, layout, components;
@layer base {
:root {
--color-ink: #23352b;
--color-paper: #f7f4e9;
--color-leaf: #39734b;
--space-section: 3rem;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--color-ink);
background: var(--color-paper);
font-family: system-ui, sans-serif;
line-height: 1.6;
}
}
@layer layout {
.atelier-page {
width: min(100% - 2rem, 70rem);
margin-inline: auto;
padding-block: var(--space-section);
}
.atelier-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
align-items: start;
}
.atelier-contact {
grid-column: 1 / -1;
}
}
@layer components {
.atelier-header {
margin-block-end: var(--space-section);
}
.atelier-header__sur-titre {
margin: 0 0 0.5rem;
color: var(--color-leaf);
font-weight: 700;
}
.atelier-header__titre {
max-width: 18ch;
margin: 0;
font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
line-height: 1.1;
}
.atelier-header__intro {
max-width: 60ch;
margin: 1rem 0 0;
}
.atelier-hours,
.atelier-tips,
.atelier-contact {
padding: 1.5rem;
border: 1px solid var(--color-leaf);
border-radius: 0.75rem;
}
.atelier-hours__titre,
.atelier-tips__titre,
.atelier-contact__titre {
margin: 0 0 1rem;
font-size: 1.25rem;
line-height: 1.3;
}
.atelier-hours__liste,
.atelier-tips__liste {
margin: 0;
padding-inline-start: 1.25rem;
}
.atelier-hours__note {
margin: 1rem 0 0;
color: var(--color-leaf);
}
.atelier-tips__item + .atelier-tips__item {
margin-block-start: 0.5rem;
}
.atelier-contact {
font-style: normal;
}
.atelier-contact--accent {
background: var(--color-leaf);
color: var(--color-paper);
}
.atelier-contact__texte {
margin: 0 0 0.5rem;
}
.atelier-contact__lien {
color: inherit;
font-weight: 700;
overflow-wrap: anywhere;
}
}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.
Les variables déclarées dans :root donnent des noms partagés aux couleurs et à l’espacement principal. Elles réutilisent celles qui ont déjà été travaillées dans le projet ; vous n’avez pas besoin de créer une nouvelle convention. Les autres valeurs de la feuille précisent ici des dimensions propres à une règle, sans ajouter de propriété personnalisée au contrat.
Dans layout, la grille organise les zones principales ; le contact occupe toute la largeur disponible. Dans components, chaque groupe de sélecteurs cible une zone ou un élément de celle-ci. Les règles communes aux trois panneaux portent uniquement sur leurs boîtes, leur bordure et leurs coins : elles ne définissent pas leurs contenus respectifs.
Comment lire et maintenir cette feuille
Les commentaires doivent expliquer une décision ou une contrainte utile à la prochaine personne qui interviendra, plutôt que répéter le nom du sélecteur. Ici, les limites des couches et les groupes de règles rendent déjà l’organisation explicite ; ajoutez un commentaire français lorsqu’un choix moins évident doit être conservé. Évitez d’accumuler des commentaires obsolètes qui contredisent le code.
Pour contrôler le résultat, ouvrez index.html dans un navigateur : vous devez retrouver un en-tête, deux panneaux côte à côte pour les horaires et les conseils, puis un contact sur toute la largeur. Les couleurs et l’espacement principal proviennent des variables. Si vous modifiez la structure, gardez les classes prévues par le contrat et vérifiez que chaque sélecteur continue de viser le bon élément.
À retenir
- Conservez un seul fichier style.css et regroupez-y les règles par responsabilité.
- Gardez l’ordre des couches déclaré en tête de feuille.
- Ciblez les composants et leurs éléments avec les classes prévues au contrat.
- Appliquez quatre espaces d’indentation et commentez en français les décisions qui méritent d’être conservées.
Dans la leçon suivante, vous intégrerez ces composants dans la page complète et examinerez leurs interactions.