- CSS @layer : maîtriser la cascade moderne

Le problème de la cascade traditionnelle

Tout intégrateur a vécu cette scène : vous écrivez .btn { color: red; } dans votre fichier custom. La couleur ne s'applique pas. Vous découvrez que Bootstrap définit .btn-primary avec une spécificité supérieure. Vous ajoutez une classe parent : .my-page .btn { color: red; }. Ça marche... jusqu'à ce qu'une autre règle plus spécifique apparaisse. Puis vient la solution finale : !important. Et la dette technique commence.

CSS Cascade Layers (@layer) résout ce problème à la racine. Plus besoin de jouer à l'escalade de spécificité. Vous déclarez explicitement l'ordre de priorité de vos couches CSS, et la cascade respecte cet ordre indépendamment de la spécificité des sélecteurs au sein de chaque couche.

Avant @layer — l'enfer de la spécificité

/* Bootstrap (importé via CDN) — défini bien plus tard dans la cascade */
.btn-primary { background-color: #0d6efd; }

/* Mon CSS custom — paradoxalement, je veux qu'il prime */
.btn-primary { background-color: #ff6b35; } /* ❌ Ne s'applique pas si Bootstrap est chargé après */

/* Solution traditionnelle — augmenter la spécificité */
body .btn-primary { background-color: #ff6b35; } /* ✅ Marche, mais fragile */

/* Pire — !important qui empoisonne tout */
.btn-primary { background-color: #ff6b35 !important; } /* 🚨 Anti-pattern */

Avec @layer — l'ordre est explicite

/* Déclaration de l'ordre des couches */
@layer reset, vendor, base, components, utilities;

@layer vendor {
  /* Tout Bootstrap est ici */
  .btn-primary { background-color: #0d6efd; }
}

@layer components {
  /* Mes overrides — la couche components prime sur vendor */
  .btn-primary { background-color: #ff6b35; } /* ✅ S'applique */
}

Syntaxe et déclaration

Trois formes d'utilisation : déclaration explicite de l'ordre, déclaration avec contenu, et déclaration anonyme. Toujours commencer par déclarer l'ordre en premier.

Déclaration de l'ordre (recommandée)

/* En tête de votre fichier CSS principal */
@layer reset, vendor, base, components, utilities, overrides;

/* L'ordre devient figé : reset < vendor < base < components < utilities < overrides */

Déclaration avec contenu

@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html, body {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }
}

@layer base {
  :root {
    --color-primary: #0d6efd;
    --color-text: #212529;
    --font-base: 'Inter', system-ui, sans-serif;
  }
  body {
    color: var(--color-text);
    font-family: var(--font-base);
  }
}

@layer components {
  .btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 600;
  }
  .btn-primary {
    background: var(--color-primary);
    color: white;
  }
}

Couche anonyme (à éviter en production)

/* Utilisable mais difficile à référencer ensuite */
@layer {
  .floating-card { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}

Ajouter du contenu à une couche existante

/* En haut du fichier */
@layer reset, base, components;

/* Plus tard, on peut rouvrir une couche pour ajouter */
@layer base {
  h1 { font-size: 2rem; }
}

/* Encore plus tard, dans un autre fichier */
@layer base {
  h2 { font-size: 1.5rem; }
}

/* Toutes ces déclarations vont dans la couche "base" */

Ordre des couches : la priorité expliquée

La nouvelle hiérarchie de la cascade CSS, du moins prioritaire au plus prioritaire, est :

Spécificité ignorée entre couches

@layer base, theme;

@layer base {
  /* Spécificité (0,3,0) */
  .nav .btn.primary {
    color: blue;
  }
}

@layer theme {
  /* Spécificité (0,1,0) — moindre que .nav .btn.primary */
  .btn {
    color: red;
  }
}

/* Résultat : red gagne car la couche theme prime sur base */
/* Spécificité IGNORÉE entre couches — seul l'ordre compte */

Spécificité respectée DANS une couche

@layer components {
  .btn { color: blue; }              /* (0,1,0) */
  .btn.primary { color: red; }       /* (0,2,0) — gagne dans la couche */
}
/* Résultat : red */

!important inverse l'ordre des couches

@layer base, theme;

@layer base {
  .btn { color: blue !important; }   /* IMPORTANT */
}

@layer theme {
  .btn { color: red !important; }    /* IMPORTANT mais couche plus tardive */
}

/* Résultat : BLUE
   Avec !important, la PREMIÈRE couche déclarée gagne (logique inversée) */

Architecture avec Bootstrap 5

L'utilisation la plus pragmatique de @layer est l'isolation des frameworks externes (Bootstrap, Tailwind, ou anciens CSS legacy) pour pouvoir les surcharger sans batailler avec la spécificité.

Pattern d'intégration Bootstrap 5

/* main.css — déclarer l'ordre tout en haut */
@layer reset, vendor, base, components, utilities;

/* Importer Bootstrap dans la couche vendor */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css') layer(vendor);

@layer base {
  :root {
    --my-primary: #ff6b35;
    --my-radius: 0.5rem;
  }
}

@layer components {
  /* Override des composants Bootstrap sans !important ni hyper-spécificité */
  .btn-primary {
    background-color: var(--my-primary);
    border-color: var(--my-primary);
  }
  .btn-primary:hover {
    background-color: #e55a2b;
    border-color: #e55a2b;
  }
  .card {
    border-radius: var(--my-radius);
    border: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
}

@layer utilities {
  .glass {
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.7);
  }
}

Coexistence Bootstrap + Tailwind (rare mais possible)

@layer reset, bootstrap, tailwind, components, overrides;

@import url('bootstrap.min.css') layer(bootstrap);
@import url('tailwind.css')      layer(tailwind);

@layer overrides {
  /* Ces règles dominent les deux frameworks */
  .my-button { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
}

Couches imbriquées et sous-couches

@layer supporte l'imbrication, utile pour structurer une bibliothèque de composants en sous-domaines (forms, navigation, cards, etc.).

Sous-couches

@layer components {
  @layer base, forms, navigation, cards;

  @layer base {
    .btn { padding: 0.5rem 1rem; }
  }

  @layer forms {
    .form-control { border: 1px solid #ced4da; }
    .form-label { font-weight: 600; }
  }

  @layer navigation {
    .navbar { padding: 1rem; }
    .nav-link { color: #495057; }
  }

  @layer cards {
    .card { border-radius: 0.5rem; }
  }
}

Référencer une sous-couche depuis l'extérieur

/* Notation pointée : couche.sous-couche */
@layer components.forms {
  .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25);
  }
}

Bonne pratique : ne pas dépasser 2 niveaux

Plus de 2 niveaux d'imbrication rendent la mental model difficile. Préférez une organisation plate avec des préfixes clairs.

@import avec layer()

La fonction layer() dans @import permet d'attribuer un fichier CSS entier à une couche, sans avoir à l'éditer. Indispensable pour les CSS tiers.

Imports ciblés par couche

/* Tout le contenu de reset.css → couche reset */
@import url('css/reset.css') layer(reset);

/* Bootstrap entier → couche vendor */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css') layer(vendor);

/* Animate.css → couche utilities */
@import url('https://cdn.jsdelivr.net/npm/animate.css@4/animate.min.css') layer(utilities);

/* Mon CSS custom dans la couche components */
@import url('css/my-components.css') layer(components);

/* CSS sans nom de couche → couche anonyme (à éviter) */
@import url('css/legacy.css') layer;

Ordre du @import et ordre déclaratif

/* Toujours déclarer l'ordre AVANT les @import */
@layer reset, vendor, base, components, utilities;

@import url('reset.css')     layer(reset);
@import url('bootstrap.css') layer(vendor);
@import url('base.css')      layer(base);
@import url('app.css')       layer(components);

/* Si l'ordre n'est pas déclaré, les couches s'ordonnent par ordre d'apparition du @import */

Le CSS hors couche : exceptions

Toute règle CSS qui n'est pas dans une @layer a une priorité supérieure à toutes les couches. C'est un mécanisme volontaire pour les overrides ponctuels et les styles utilitaires critiques.

Cas légitimes d'unlayered CSS

@layer reset, vendor, base, components;

@layer vendor {
  .btn-primary { background: blue; }
}

@layer components {
  .btn-primary { background: green; }
}

/* Hors couche — bat tout */
.btn-primary { background: red; }

/* Résultat : red */

Anti-pattern à éviter

/* ❌ Mélanger des centaines de règles unlayered avec un système @layer */
/* Cela annule l'intérêt de la cascade explicite */

/* ✅ Réserver l'unlayered aux exceptions documentées */
/* "Override critique appliqué pour bug #1234 — à réintégrer en couche utilities" */
.urgent-fix { display: none !important; }

Stratégies d'architecture moderne

Stratégie ITCSS adaptée

@layer
  settings,    /* variables, tokens design system */
  tools,       /* mixins, fonctions (PostCSS, Sass) */
  generic,     /* reset, normalize */
  elements,    /* h1, p, ul — éléments HTML purs */
  objects,     /* .container, .grid — patterns abstraits */
  components,  /* .card, .btn, .navbar — UI concrets */
  utilities;   /* .text-center, .mt-3 — single-purpose */

Stratégie Atomic / Tailwind-like

@layer base, components, utilities;

@layer base {
  /* Reset + globals */
}
@layer components {
  /* Composants composites */
}
@layer utilities {
  /* Toutes les helpers — toujours prioritaires */
  .hidden { display: none; }
  .text-center { text-align: center; }
}

Stratégie minimaliste 3 couches

@layer vendor, app, overrides;

@layer vendor {
  /* Bootstrap, libs externes */
}
@layer app {
  /* 95% de votre CSS */
}
@layer overrides {
  /* Cas exceptionnels documentés */
}

Exemple de migration projet existant

/* AVANT — main.css en vrac */
.btn { color: blue; }
.navbar .btn { color: green; }   /* spécificité hack */
.card .btn { color: orange !important; }  /* anti-pattern */

/* APRÈS — main.css organisé */
@layer base, components;

@layer base {
  .btn { color: blue; }
}
@layer components {
  /* Plus besoin de hacker la spécificité */
  .navbar-btn { color: green; }
  .card-btn { color: orange; }
}

Conclusion

@layer est l'avancée CSS la plus structurante depuis Flexbox. Il transforme la cascade d'un système implicite et chaotique en architecture explicite et prévisible. Fini les escalades de spécificité, les !important qui se propagent comme un virus, et les hyper-sélecteurs qui rendent le refactoring impossible.

Adoptez @layer dès votre prochain projet : déclarez 3 à 5 couches en tête de fichier, importez vos frameworks externes dans une couche vendor via layer(), et placez vos overrides dans une couche components ou overrides. Avec 95%+ de couverture en 2026, c'est désormais une feature de production sûre. Votre future équipe vous remerciera quand elle pourra customiser Bootstrap sans guerre civile.