Is there a way to have layered CSS styles have a higher priority than unlayered styles?

32 views Asked by At

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?

0

There are 0 answers