- From: Roman Komarov via GitHub <sysbot+gh@w3.org>
- Date: Thu, 21 Dec 2023 15:15:49 +0000
- To: public-css-archive@w3.org
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