CSS layers are awesome, except one (in my opinion) unintuitive behavior: they have a lower priority than unlayered styles:
/* site style */
div {
color: red;
}
/* user style */
@layer myflavor {
div {
color: blue;
}
}
/* The div is still red :-( */
So I can not, for example, use layers in user styles. Because then the user style may not have an effect if a rule for that selector is already defined.
It also makes it complex to gradually transform the styles of a site to a layer based approach, except the complete original CSS gets wrapped in a layer first, which may be difficult to achieve.
Is there a feature which makes a layer have a higher priority than unlayered styles? Something like @layer! foo {...}
or @option layer-priority layered unlayered
?