Re: [csswg-drafts] [css-cascade-5] Proposal to disallow interleaving of @layer and @import rules (#6522)

Thanks for the clarifications on that, @mirisuzanne. Think I get it now:

```css
/* EXAMPLE 31 */
@layer default;
@import url(theme.css) layer(theme);
@layer components; /* 👈 This @layer statement here will make all subsequent @import rules be ignored. In this example however there are none */

@layer default {
  audio[controls] {
    display: block;
  }
}
```

I see that in https://github.com/w3c/csswg-drafts/commit/d9fdc1e6a7454913783e5fc6267c12b5a7c7b9b5 you changed the text to “A ''@layer'' rule that comes after …”. More precise would be “A ''@layer'' statement at-rule that comes after …”?

---

Winging back to “the @layer block at-rule” described just above it. There it reads in a note:

> Note: @layer block at-rules cannot be interleaved with @import rules.

Is that 1 @import rule in between two @layers block at-rules? If so, I somewhat read between the lines that best practice that's being hinted at is to:
1. Establish a layer order upfront using `@layer` statement at-rules
1. Group your `@import`s after that
1. Append styles to already established layers using `@layer` block at-rules

Would that be something to recommend people to do?

---

_(Apologies if I'm asking too many stupid questions regarding this. Trying to understand things correctly here. Perhaps some code-examples of what is meant by all those limitations could help?  In css-nesting-1 for example I see a lot of these “wrong examples“ with an explanation of what exactly is wrong added to them.)_

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6522#issuecomment-909657652 using your GitHub account


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

Received on Tuesday, 31 August 2021 21:32:35 UTC