Re: [csswg-drafts] [css-nesting-1] Syntax Invites Errors (#7834)

> _I am not a huge fan of the proposed trick to change the parsing mode. I find it extremely confusing._ 

I've been trying to wrap my head around some of the proposed draft nesting rules, finding them a little confusing as well. I never use SASS, so personally do not benefit from incorporating any SASS syntax.

On the other hand @FremyCompany's approach:

> ```css
> article {
>     color: gray;
> } & {
>     h1 { color: black; font-weight: bold; }
>     h2 { color: black; }
> }
> ```

Is simple, clear, intuitive. Keeping the nesting & outside of brackets alleviates the ambiguous "is it a property or selector" parsing issue.

Only, how does it work for multiple nest levels? And split nests? Also, I'm concerned that closing a selector's bracket before nesting is counter to how other languages nest things such as `if` or `for` statements.

So, following this idea to use ampersand to define a nest _group_ instead of in front of every nested selector, would it make more sense to use a different bracket type for enclosing nested selectors, either singly or as a group, which also allows not closing a selector before nesting as in the above example?

### _Example_
Here using &[] to define nest groups:

```css
section {
  margin: 0;
  padding: 0.5em;
  & [
    article, aside {
      color: #010a12;
      background-color: #e6e0dd;
      & [
        h1 { color: #444; font-weight: bold; }
        h2 { color: #333; }
        .myClass { font-family: Barlow, sans-serif;}
      ]
    }
    aside {
      background-color: #cde;
      & [ p {font-size: 0.95em;} ]
    }
  ]
}

```

So here, nests are fully enclosed in square brackets (though perhaps () or <> might be more appropriate?) with I believe the same advantages as @FremyCompany's idea, though making multiple nest levels and nesting hierarchy more clear.

### split nests and regex captures
So, relative to the above example:

```css
    article, aside {
      & [ p {font-size: 0.95em;} ]
    }
```
Is essentially the same as

```css
    article p, aside p {font-size: 0.95em;} 
```

Instead of an ampersand, what if we used a $ as the symbol for the parent selector(s)? In this usage, $ or $0 would mean all of the listed parent selectors, and $1 to $9 would be each parent selector in the list, in order.


```css
    article, aside, span {
      $ [ p {font-size: 0.95em;} ]
      $1,$2 [ p { color: red;} ]
      $3 [ p {color: green;} ]
    }
```

So this would be functionally the same as:

```css
    article p, aside p, span p { font-size: 0.95em;}
    article p, aside p { color: red;}
    span p { color: green;}
    }
```

The advantage here is more granular control over what parent selectors we are nesting under.

Thank you for reading


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


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

Received on Wednesday, 12 October 2022 18:51:14 UTC