[csswg-drafts] [css-cascade-5] Do conditional rules impact layer order? (#6407)

mirisuzanne has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-5] Do conditional rules impact layer order? ==
In [CSS Cascading & Inheritance L5](https://drafts.csswg.org/css-cascade-5/) we define the `@layer` rule, and the way layers "stack" in priority based on the order they are first encountered. These will stack so the higher numbers override the lower numbers:

```css
@layer one;
@layer two;
@layer three;
```

In general, layers should interact well with conditional rules. In isolation these two rules should mean the same thing:

```css
@layer one { 
  @media (width > 500px) { /* styles */ }
}

@media (width > 500px) {
  @layer one { /* styles */ }
}
```

If the media-condition is true, then the styles are applied in the specified layer (`one`). But it's a bit less clear how the second example (layer inside condition) should impact the order of multiple layers:

```css
@media (width > 500px) {
  @layer one { /* styles */ }
}

@layer two;
@layer three;
@layer one;
```

Does layer `one` come first, last, or does it update dynamically based on the evaluation of the condition? I think the two options are roughly:

1. Layers are always added to the order, no matter how the condition might resolve. It's as though the layer rules "bubble up" to be defined outside the condition, but the styles are still conditional. This matches my instinct, personally.
2. Layer order is dynamic, based on conditions? It's interesting to consider, but could get pretty surprising…

This question is also relevant to other conditions, such as `@supports` or `@container`. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6407 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 23 June 2021 22:11:40 UTC