Tutoriel CSS : Les couches @layer

Dans ce tutoriel nous allons parler du système de @layer en CSS qui permet de définir plus simplement l'ordre de précédence des règles CSS. On peut grouper des règles dans une couche nommée en utilisant la syntaxe @layer nom-couche {regles}

@layer theme {
  .btn {
    background: red;
  }
}
/* Le bouton sera rouge */

Les règles dans une couche seront toujours surchargées par des règles en dehors, peu importe le niveau de spécificité.

button {
    background: green;
}

@layer theme {
  .btn {
    background: red;
  }
}
/* Le bouton sera vert */

Si on a plusieurs couche c'est la dernière couche qui surchargera le style, peu importe le niveau de spécificité.

@layer global {
  .btn {
    background: green;
  }
}

@layer theme {
  button {
    background: red;
  }
}
/* Le bouton sera rouge */

L'avantage est que les couches peuvent être définies en amont pour contrôler l'ordre.

@layer global, theme; /* On crée les layers en amont pour définir l'ordre */

@layer theme {
  button {
    background: red;
  }
}

@layer global {
  .btn {
    background: green;
  }
}
/* Le bouton sera rouge, vu que "theme" est la dernière couche de la liste */

L'avantage est qu'une couche peut être remplit à n'importe quel moment dans la feuille de style et il est possible d'y ajouter de nouvelles règles quand on le souhaite.

Par contre, si on ajoute un !important sur une règle (chose que je déconseille fortement), l'ordre de priorité s'inverse et c'est la première règle !important rencontré dans les layers (puis globalement) qui l'emporte.

Cas d'utilisation

Cela fait des années que l'on travaille sans ce système de couche donc on peut s'interroger sur la nécessité d'une telle fonctionnalité.

CSS tiers

Un cas d'utilisation intéréssant peut être l'écrasement du style provenant d'une librairie tiers. En effet, si une librairie a créé des règles trop spécifique il peut être difficile de les surcharger. Avec le système de couche on peut importer un CSS dans une couche spécifique.

@import 'theme.css' layer(utilities);

Ainsi, en contrôlant l'ordre des couches, on pourra écraser les règles plus facilement sans avoir à réfléchir à la spécificité des sélecteurs.

Reset & Utilitaire

Un autre cas d'utilisation concerne l'organisation générale de notre CSS si on mélange plusieurs pratiques.

• Les règles "reset" doivent être placées en premier avec la priorité la plus faible pour être écrasable facilement.
• Les règles "components" ou "theme" sont placées ensuite et permettent d'écrire le style de nos éléments
• Les règles "utilities" (par exemple "mt-2", "d-flex"...) sont placées en dernier pour l'emporter quoi qu'il arrive.

C'est d'ailleurs ce type d'organisation que l'on retrouve sur Tailwind.