A tiny test repo with some CSS Cascade Layer examples.
The mechanism is simple enough: the rules in a layer override any other rules of previous layers on the same element and property.
The concrete example here is the override of the style of the base values with the styles.
If the stylesheet had no layers it would be the following:
.heading {
font-size: 2rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
}
The source order isn't enoug here: the heading element selectors do not override the class selector even though they select the same elements.
Instead, we have the following code:
@layer base {
.heading {
font-size: 2rem;
}
}
@layer styles {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
}
}
The styles
layer is later than base
and so even the single element selector
overrides a class selector from the layer before.