Re: [csswg-drafts] [css-cascade] Proposal: `@layer initial` should always be the first layer (#10094)

I was thinking about this again, and I'm starting to wonder if we need something like `@context` to allow authors to place styles before or after the default context(s).

Let's think about CSS resets again. Most sites do something like this today:

```css
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
}
```

This has low specificity and can be de-prioritized further using `@layer`. But it still takes precedence over the previous contexts. This is a problem because it makes it hard to write styles using `:host` and `:slotted` selectors.

```html
<my-component>
  <template shadowrootmode="open">
    <style>
      /* This gets overridden by our reset 🙁 */
      :host { margin: 1rem }
    </style>
    <slot></slot>
  </template>
</my-component>
```

What if we instead allowed authors to put styles in a context that precedes all other contexts? This would be the ideal place to put resets and default styles.

```css
@context defaults {
  *, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
  }
}
```

To take this one step further, it would be equally useful to have a context that comes after all other context. This would be a great place for e.g. browser extensions to put user styles.

For this to work, we'd need either pre-determined names or a different at-rule.

```css
@context(pre) {
  /* resets/defaults go here */
}

/* all regular styles will fit in between */

@context(post) {
  /* user styles go here */
}
```

There's a lot of bikeshedding opportunities, but hopefully the idea is clear: `@context` would be a thing that lives one level above `@layer`. This means `@layer` can be used to organized within each context.

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


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

Received on Wednesday, 19 June 2024 19:42:19 UTC