Intégrer les composants dans la page
Objectif : Appliquer les conventions de composants et leurs variantes à l’en-tête, aux horaires, aux conseils pratiques et au bloc de contact de la page de l’atelier.
Quand plusieurs composants sont réunis dans une même page, des règles qui fonctionnaient séparément peuvent entrer en conflit. Un style trop général peut modifier les titres des horaires ou du contact sans que vous l’ayez prévu. Vous allez assembler les quatre zones de la page en respectant le contrat entre le HTML et les classes CSS, puis contrôler les interactions entre leurs styles.
La leçon « Définir une convention de nommage locale » a établi le principe de sélecteurs limités à leur composant ; la leçon « Assembler la structure de production » a organisé les responsabilités dans style.css. Ici, vous appliquez ces choix à une page complète : chaque composant possède ses propres règles, tandis que la mise en page organise leur position sans imposer leurs détails visuels.
Le contrat HTML de la page
Les classes du HTML indiquent les composants et leurs éléments : atelier-header pour l’en-tête, atelier-hours pour les horaires, atelier-tips pour les conseils et atelier-contact pour le contact. La classe atelier-contact--accent est une variante explicite du contact. Elle ne remplace pas le composant de base : elle lui ajoute une présentation différenciée.
Le code ci-dessous reprend le squelette du projet sans ajouter de classe ni modifier son contenu. Les identifiants reliés aux titres par aria-labelledby nomment les sections pour les technologies d’assistance ; les règles CSS n’ont pas besoin de les cibler. Conservez cette séparation : le balisage décrit le contenu et les classes définissent les points d’application des styles.
<!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 composants dans style.css
Voici une feuille complète et cohérente avec ce HTML. La mise en page crée une grille pour les trois blocs de contenu ; les règles de composants restent regroupées sous des sélecteurs locaux. Les propriétés personnalisées réutilisent les variables autorisées du projet, et la liste des conseils garde son conteneur nommé pour rester adaptable à son espace disponible, comme vu dans « Adapter un bloc à son conteneur ».
@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;
--texte-courant: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
--titre-principal: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--color-text);
background: var(--color-surface);
font-family: system-ui, sans-serif;
font-size: var(--texte-courant);
line-height: 1.6;
}
}
@layer layout {
.atelier-page {
width: min(100% - 2 * var(--space-6), var(--content-width));
margin-inline: auto;
padding-block: var(--space-6);
}
.atelier-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
align-items: start;
}
}
@layer components {
.atelier-header {
margin-block-end: var(--space-6);
padding: var(--space-6);
border-radius: var(--space-2);
background: var(--color-accent-soft);
}
.atelier-header__sur-titre {
margin: 0 0 var(--space-2);
color: var(--color-accent);
font-weight: 700;
}
.atelier-header__titre {
max-width: 18ch;
margin: 0;
font-size: var(--titre-principal);
line-height: 1.1;
}
.atelier-header__intro {
max-width: 60ch;
margin: var(--space-4) 0 0;
}
.atelier-hours,
.atelier-tips,
.atelier-contact {
min-width: 0;
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--space-2);
}
.atelier-hours__titre,
.atelier-tips__titre,
.atelier-contact__titre {
margin: 0 0 var(--space-4);
font-size: 1.35em;
line-height: 1.25;
}
.atelier-hours__liste,
.atelier-tips__liste {
margin: 0;
padding-inline-start: 1.25em;
}
.atelier-hours__note {
margin: var(--space-4) 0 0;
color: var(--color-text);
}
.atelier-tips {
container: conseils / inline-size;
}
.atelier-tips__item + .atelier-tips__item {
margin-block-start: var(--space-2);
}
.atelier-contact {
grid-column: 1 / -1;
font-style: normal;
}
.atelier-contact--accent {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.atelier-contact__texte {
margin: 0 0 var(--space-2);
}
.atelier-contact__lien {
color: var(--color-accent);
overflow-wrap: anywhere;
}
@container conseils (min-width: 34rem) {
.atelier-tips__liste {
columns: 2;
column-gap: var(--space-6);
}
.atelier-tips__item {
break-inside: avoid;
}
}
}
@media (max-width: 42rem) {
.atelier-layout {
grid-template-columns: minmax(0, 1fr);
}
.atelier-contact {
grid-column: auto;
}
}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.
Contrôler les interactions
Dans cette feuille, les trois cartes partagent uniquement le cadre visuel commun : bordure, espacement intérieur et arrondis. Leurs titres sont regroupés pour garder une hiérarchie homogène, mais les paragraphes, listes et liens restent ciblés par composant. Ainsi, un réglage propre au lien de contact ne change ni les conseils ni les horaires. La variante accent ne modifie que le bord et le fond du contact.
Ouvrez la page dans le navigateur et inspectez successivement l’en-tête, les horaires, les conseils et le contact. Dans les styles calculés, vérifiez que les règles correspondent au composant sélectionné, que le contact porte bien sa variante et que le lien conserve une couleur identifiable. Contrôlez aussi que le contenu long du courriel ne déborde pas de la carte et que les listes gardent leur retrait.
La grille de base place les horaires et les conseils côte à côte, puis le contact sur toute la largeur ; la règle média empile les blocs lorsque la fenêtre est étroite. Ce premier contrôle confirme le fonctionnement de l’assemblage, sans remplacer le protocole détaillé de vérification multi-largeur de la prochaine leçon. Si vous constatez une différence inattendue, identifiez d’abord le sélecteur responsable plutôt que d’ajouter une surcharge générale.
À retenir
- Conservez le contrat entre les classes du HTML et les sélecteurs de chaque composant.
- Partagez seulement les styles réellement communs ; gardez les détails visuels dans leur composant.
- Appliquez les variantes avec une classe explicite, sans remplacer les règles de base.
- Inspectez les styles calculés et le contenu assemblé pour repérer les interactions inattendues.
La prochaine leçon vous guidera dans la vérification du comportement de la page à différentes largeurs.