Une décennie de feuilles de style ont été écrites pour les préprocesseurs car CSS ne pouvait pas s'imbriquer. Désormais, c'est possible, de manière native, et le navigateur analyse exactement la syntaxe produite par votre mémoire musculaire Sass, avec une règle : les sélecteurs descendants à l'intérieur d'un bloc imbriqué ont besoin de l'esperluette.

.card {
  border: 1px solid oklch(0.9 0 0);

  > header { padding: 0.75rem 1rem; }
  &:hover { border-color: oklch(0.75 0 0); }
  p { margin-block: 0.4rem; }
  &.wide { max-width: 60ch; }
}

Les deux règles qui garantissent l'honnêteté

  1. Composez le parent explicitement lorsque vous le pensez : l'esperluette est le sélecteur de parent, donc l'ensemble de la carte a besoin du formulaire indiqué ci-dessus, et le .wide nu correspondrait à chaque élément large.
  2. Gardez la nidification peu profonde, sur deux niveaux au maximum. L'imbrication profonde était une habitude du préprocesseur pour construire des tours de spécificité, et les tours de spécificité ont toujours été le bug.

Migration d'un préprocesseur

  • La sortie Sass est déjà compilée en CSS plat, alors exécutez votre build une dernière fois et comparez ; puis remplacez la syntaxe d'imbrication et regardez les tests se dérouler.
  • Les variables se traduisent à proximité : la plupart des fichiers de variables Sass deviennent de simples propriétés personnalisées, qui se cascadent et peuvent être remplacées au moment de l'exécution.
  • L'étape de construction vaut peut-être la peine d'être conservée pour d'autres choses, mais elle ne possède plus la feuille de style, ce qui est une suppression très intéressante.

Ce site fournit du CSS simple pour exactement cette raison : moins de couches de construction entre ce que vous avez écrit et ce que le navigateur exécute. L'imbrication rend simplement le CSS simple gacor à la taille où vit réellement chaque projet.