Chaque feuille de style finit par développer un monstre : la règle qui gagne uniquement parce qu'elle est arrivée en dernier avec trois identifiants et un important. Les couches en cascade remplacent ce folklore par un ordre que vous écrivez une fois.

@layer reset, base, components, utilities;

@layer base {
  a { text-decoration-thickness: from-font; }
}
@layer components {
  .card a { text-decoration: none; }
}
@layer utilities {
  .link-plain { text-decoration: none; }
}

Les trois règles qui comptent

  • L'ordre des couches est déclaré une fois, d'abord : réinitialisation, puis base, puis composants, puis utilitaires. Les couches ultérieures gagnent quelle que soit leur spécificité.
  • Les styles sans couches battent tout ce qui est en couches, de sorte qu'une réinitialisation dans un calque ne peut jamais remplacer un composant extérieur à celui-ci.
  • La relation !important s'inverse : les styles importants d'une couche précédente battent ceux importants des couches ultérieures, ce qui explique pourquoi les bibliothèques de réinitialisation survivent à vos utilitaires.

Adoptez-le sur un site existant

  1. Déclarez la commande sur une seule ligne en haut de votre feuille de style de saisie ; rien ne bouge encore.
  2. Importez chaque fichier existant dans une couche : le code du fournisseur dans les couches inférieures, votre propre code au-dessus.
  3. Recherchez les règles !important restantes et déplacez-les dans la couche qui les rend inutiles ; chacun d’eux supprimé est un bug que vous ne déboguerez plus jamais.
  4. Les styles sans couche continuent de gagner, alors utilisez-les comme zone de préparation pendant la migration, puis superposez-les après.

Les couches sont livrées partout de manière moderne, et le mode de défaillance en dehors du support est bénin : les fichiers se contentent de cascader à l'ancienne. Ce site s'appuie sur lui dans son esprit avec une feuille de style courte et aucune pile d'utilitaires, mais pour tout projet qui charge deux frameworks et son propre thème, les couches constituent la mise à niveau silencieuse et le soulagement du débogage est très gacor.