I dagens CSS skal vi se på @layer
Som man kanskje allerede vet så har CSS et hierarki på hvordan CSS reglene blir tatt i bruk. Noe av det er rekkefølgen den er skrevet i, ellers kan man lage mer spesifikke regler ved å bruke ID-er eller klasser. Selvfølgelig har man !important om en siste utvei, men visste du at man kan definere rekkefølge og endre på hierariket selv?
Med @layers kan man lage egne lag som man igjen kan bestemme rekkeføkgen på. Dette kan man gjøre ved å først definere rekkefølgen
@layer theme, layout, utilities;I dette eksempelet vil man lage tre lag, theme, layout og utilities. Regler som overlapper fra utilities vil ha presendens over de som er i de to første lagene, og så videre.
Det som er viktig å merke seg at regler som er definert utenfor et lag har høyere viktighet enn regler i et lag. Så i følgende eksempel vil tekstfargen fortsatt være lilla, selv om regel inne i laget er mer spesifikk.
p {
color: rebeccapurple;
}
@layer type {
.box p {
color: green;
}
}Det er med andre ord fortsatt viktig å være klar over hierarkiet av viktighet når man jobber med lag, men det gir deg litt mer frihet til å definere CSS uten å nødvendigvis tenke på rekkefølgen i fila.
@layer har god støtte i alle nettlesere!
Relevante lenker anbefalt av forfatteren
Uffda. En feil har oppstått, og vi klarer ikke å hente lenken!