[csswg-drafts] [css-cascade-6] Named scopes proposal (#9742)

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

== [css-cascade-6] Named scopes proposal ==
This issue is a follow-up to the previous issue: https://github.com/w3c/csswg-drafts/issues/9741

In that issue, I explored the way `:scope` works in a nested context:

```CSS
@scope (.outer) {
  @scope (.inner) {
    :scope.inner .test {
      background: lightgreen;
    }
    
    /* This should never match */
    :scope.outer .test.never {
      background: tomato;
    }
  }
}
```

My proposal consists of two parts:

1. Augment the syntax of `@scope` (https://drafts.csswg.org/css-cascade-6/#scope-syntax), allowing specifying the `<scope-name>` as a `<custom-ident>` (or `<dashed-ident>`?), in a way similar (syntax-wise, not behavior-wise though) how we can specify a name for containers (https://drafts.csswg.org/css-contain-3/#container-rule) with a `<container-name>`.
2. Introduce a functional form of a `:scope` pseudo-class, which could be used with the scope name inside, like `:scope(my-scope)` (or `:scope(--my-scope)` if we'd decide on `<dashed-ident>`).

This way, we could do something like this:

```CSS
@scope outer (.outer) {
  @scope inner (.inner) {
    :scope(inner) .test {
      background: lightgreen;
    }
    :scope(outer) .test {
      background: lime;
    }
  }
}
```

Basically, allowing specifying any specific scope defined around our selector.

Some things to think about:

- Can the same name be used multiple times? I'd say that yes, in which case, similar to anonymous scopes, the innermost one would win.
- Do we need some way to get the equivalent `&`, where we'd retain the scope root's selector's specificity? I'm not sure of the use-cases for that, probably could be a separate proposal in itself.

Use cases:

- Using a named scope for the root one, enabling something similar to the [`@at-root` in Sass](https://sass-lang.com/documentation/at-rules/at-root/), or [root reference in Stylus](https://stylus-lang.com/docs/selectors.html#root-reference). This could work already with the `:scope`, but only unless a nested scope is introduced, in which case we will lose the access to the root scope.
- “Naming” scopes to be reusable inside, as a way to not repeat yourself. This way, scopes could fully replace something like BEM, where we could define a scope for the “block”, and then define sub-scopes for every “element”. Then, we retain an ability to mention “modifiers” on the block and elements separately when specifying various states and cases.

- - -

Out of this proposal's _scope_ (sorry): naming scopes as a way to reuse their selectors: this is probably a job for CSS-extensions ([label](https://github.com/w3c/csswg-drafts/labels/css-extensions-1), [spec](https://drafts.csswg.org/css-extensions/); I did not find a good single issue to mention).

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


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

Received on Thursday, 21 December 2023 15:15:52 UTC