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.
Au jour 46, j’ai expliqué comment vous pouvez ordonner les calques en les définissant d’abord dans une liste séparée par des virgules. La première couche de la liste a la priorité la plus basse et la dernière couche la plus élevée.
@layer base, components, theme, framework;Vous pouvez créer autant de listes que vous le souhaitez, mais la chose importante à retenir est que les calques sont empilés en fonction de l’ordre dans lequel ils apparaissent pour la première fois. Si vous définissez une couche dans plusieurs listes, seule la première apparence de cette couche compte.
@layer base, components, theme;
@layer framework, base, components;@layer base {
p {
border: 10px solid red;
}
}
@layer framework {
p {
border-color: blue;
}
}
@layer components {
p {
border-color: rebeccapurple;
}
}
@layer theme {
p {
border-color: green;
}
}
Bien que components est le dernier calque de la dernière liste et doit donc avoir la priorité la plus élevée, la couleur de la bordure est bleue, comme défini dans le framework couche. C’est parce que la base et les composants ont déjà été définis plus tôt.
@couche de base, composants, thème ;
@cadre de couche, base, Composants;
Barman, j’ai un pari pour toi. Je vais te parier 300 $ que je peux pisser dans ce verre là-bas et ne pas en renverser une seule goutte.
Voir sur CodePen.