Re: [csswg-drafts] [css-nesting] Syntax suggestion (#4748)

My main issue with the specified approach is that there are two distinct syntax rules for authors, in order to solve a browser-parsing issue. While I understand the parser requirement in play, I don't like passing that along as an inconsistent syntax, where authors have to understand the parsing distinction. It would be great if we could move towards a more consistent single syntax, no matter what nested selector you plan to write.

In talking with @fantasai, we had a few ideas for a variation on the approach suggested above:

```css
div {
  background: black;
  color: white;

  /* curly braces always fence off nested selectors, so we avoid syntax disparities */
  /* by default & is required in all selectors, to establish relationship */
  {
    & span { /* div span */ }
    p & { /* p div */ }
  }

  /* multiple nesting blocks are allowed */
  /* and are able to prepend a combinator for the entire block */
  /* (or & for descendant) */
  & {
    span { /* div span */ }
    p & { /* div p div */ }
  }

  ~ {
    span { /* div ~ span */ }
    p + & { /* div ~ p + div */ }
  }

  /* could also use & before combinator, for the same results */
  & ~ {
    span { /* div ~ span */ }
    p + & { /* div ~ p + div */ }
  }
}
```

- It's a single, concise syntax for any type of nested selector
- it allows the author to establish meaningful/readable shorthands that avoid repetition 
- the shorthand also helps to group selectors which share a similar relationship to the parent

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


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

Received on Tuesday, 21 September 2021 15:48:25 UTC