Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
Vous pouvez utiliser @import pour charger des feuilles de style entières dans une couche en cascade.
@import url("path/to/the/styles.css") layer(layername);Par exemple, vous pouvez charger quelque chose comme Bootstrap dans une couche tierce dédiée.
@layer third-party, base, components, utility;@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);
@layer base {
body {
}
}
<button type="button" class="btn btn-primary">Primary</button>
Une chose importante à savoir lors de l’importation de styles est que l’endroit où vous placez le @import règle. Dans la spécification, il est écrit :
Toutes les règles @import doivent précéder toutes les autres règles at et règles de style valides dans une feuille de style (en ignorant @charset et les définitions @layer vides) et ne doivent pas avoir d’autres règles at ou règles de style valides entre elles et les règles @import précédentes, ou bien la règle @import n’est pas valide.
Ceci n’est pas valide :
@layer third-party, base, components, utility;@layer base {
body {
}
}
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);
Voir sur CodePen.