Déclarer les couches de cascade

Quand une feuille de style grandit, une règle ajoutée en urgence peut modifier l’apparence d’une zone sans que son effet soit évident. Les couches de cascade vous permettent de définir un ordre de priorité lisible avant de répartir les styles de la page de l’atelier.

Vous avez déjà cartographié les règles par zone et par responsabilité ; nous reprenons cette organisation pour en fixer l’ordre dans la cascade. Dans cette leçon, vous allez créer les couches reset, base, layout et components, puis y placer des règles concrètes pour l’en-tête, les horaires, les conseils et le contact.

Déclarer l’ordre avant les règles

La règle @layer crée une couche de cascade. Vous pouvez déclarer plusieurs couches en une seule instruction, séparées par des virgules. L’ordre indiqué est important : parmi ces couches, celles déclarées plus à droite ont la priorité la plus élevée pour les déclarations normales.

@layer reset, base, layout, components;

Placez cette déclaration au début de style.css, avant les règles qui utilisent ces couches. Vous établissez ainsi l’ordre global une seule fois : reset est le moins prioritaire et components le plus prioritaire parmi les quatre couches nommées. Cette déclaration préalable évite que l’ordre dépende de la première apparition de chaque couche dans le fichier.

Répartir la feuille de style de l’atelier

Une couche est nommée après @layer, et son contenu est délimité par des accolades. Le fichier reste unique, conformément au projet, mais ses responsabilités deviennent visibles dans la structure même du CSS. L’exemple suivant fournit une feuille minimale cohérente avec la page de présentation de l’atelier.

@layer reset, base, layout, components;

@layer reset {
    * {
        box-sizing: border-box;
    }

    body,
    h1,
    h2,
    p {
        margin: 0;
    }
}

@layer base {
    :root {
        --color-ink: #23352b;
        --color-paper: #f7f4e9;
        --color-leaf: #39734b;
        --space-section: 3rem;
    }

    body {
        background: var(--color-paper);
        color: var(--color-ink);
        font-family: Arial, sans-serif;
        line-height: 1.6;
    }
}

@layer layout {
    .page-header,
    .page-main,
    .page-footer {
        width: min(100% - 2rem, 68rem);
        margin-inline: auto;
    }

    .page-main {
        display: grid;
        gap: var(--space-section);
        padding-block: var(--space-section);
    }
}

@layer components {
    .page-header {
        padding-block: 1.5rem;
        border-bottom: 2px solid var(--color-leaf);
    }

    .workshop-hours {
        padding: 1.5rem;
        background: white;
        border-radius: 0.75rem;
    }

    .garden-tips {
        padding-inline-start: 1.25rem;
    }

    .contact-panel {
        padding: 1.5rem;
        background: var(--color-leaf);
        color: white;
        border-radius: 0.75rem;
    }
}

Dans cet exemple, les règles de remise à zéro sont regroupées dans reset, les réglages communs du document dans base, la largeur et l’espacement général dans layout, puis les apparences particulières dans components. Les couleurs sont centralisées sous forme de propriétés personnalisées utilisées par les composants ; leur conception et leur évolution seront étudiées dans les leçons consacrées aux variables.

Vérifier la priorité en pratique

Supposons que vous ajoutiez une couleur de fond à la zone des horaires dans deux couches différentes. Le sélecteur de la règle située dans components peut être moins spécifique que celui de la règle située dans layout : la couche la plus prioritaire détermine d’abord laquelle l’emporte pour ces déclarations normales.

@layer layout {
    main .workshop-hours {
        background: #e9efe5;
    }
}

@layer components {
    .workshop-hours {
        background: white;
    }
}

Le fond de .workshop-hours est blanc : la déclaration de la couche components l’emporte sur celle de layout.

La règle de layout utilise pourtant un sélecteur plus spécifique, main .workshop-hours. Cela ne suffit pas à gagner face à une déclaration normale placée dans la couche ultérieure components : la priorité entre couches est examinée avant la spécificité. Pour plusieurs règles d’une même couche, en revanche, la spécificité et l’ordre des règles continuent de jouer leur rôle habituel.

À retenir

• Déclarez l’ordre des couches au début de style.css, avant les règles qui les remplissent.
• Pour les déclarations normales stratifiées, une couche déclarée plus tard est prioritaire sur une couche déclarée plus tôt.
• La couche gagnante est déterminée avant la comparaison de spécificité entre ses règles et celles des autres couches.
• Placez reset, base, layout et components selon les responsabilités de la page de l’atelier.
• Préservez un ordre stable ; les conflits, exceptions et règles d’équipe seront traités dans la leçon suivante.