[csswg-drafts] [css-nesting-1] Yet another nesting proposal (#7970)

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

== [css-nesting-1] Yet another nesting proposal ==
The fundamental problem with allowing nested style rules is disambiguating properties from nested rules.

So far, every proposal has focused on taking a regular style rule and creating a syntax to identify selectors within it. What if we turned that around?

My proposal is to have an at-rule that has a selector, and contains nothing but style rules (and other at-rules), whose selectors are relative to the at-rule. We can then have a special block within the at-rule to hold properties that apply to the nesting root,

E.g.
```
@nest foo {
    & { color: blue; }
    bar { color: red; }
}
```
would be equivalent to:
```
foo { color: blue; }
foo bar { color: red; }
```

You could also, of course nest the at-rules:
```
@nest foo {
    & { color: blue; }
    @nest bar {
        & { color: red; }
        baz { color: green; }
    }
}
```
would be equivalent to:
```
foo { color: blue; }
foo bar { color: red; }
foo bar baz { color: green; }
```

It may also be possible to omit the `&` and just use a bare `{}` block within the at-rule to hold properties.

This requires no changes to existing parsing, OM, or behavioral rules and has a straightforward OM for the new at-rule.

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


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

Received on Thursday, 27 October 2022 19:52:01 UTC