Re: [csswg-drafts] [css-nesting-1] & representing parent elements vs parent selector (#8310)

I agree that authors familiar with preprocessor nesting will (at first) be surprised by this _in the situations where it comes up_ - which is not the majority of nesting, but also not rare. But I'm not convinced by the arguments that one approach is more _intuitive_ than the other outside that existing reference, or that authors would have to _imagine an `is()` selector that isn't there_, or that the currently-specified approach is a non-starter for authors once we're used to it.

Rather, the current approach:

- Makes good sense if we stop thinking of `&` as a text-insertion point, and think of it much more like `:scope` which already refers to a matched element, much like using `:is()`.
- Can be 'how CSS nesting works' in a way that helps people also understand 'how CSS `:is()` works' and 'how scope works' without any of them requiring you to imagine or insert the other.

In Chromium browsers, with Experimental Web Platform features turned on, all but the final selector here match the same elements ([see codepen demo](https://codepen.io/miriamsuzanne/pen/zYLPyQj)):

```css
/* Similar to `.a :is(.b .c)` currently */
.b .c { 
  .a & { 
    background: cyan;
  }
}

/* A scoped selector in the same shape */
@scope (.b .c) {
  .a :scope {
    border-style: dotted;
  }
}

/* Reversing the shape, with .a as the scope */
@scope (.a) {
  /* only the right-most matched element must be in-scope */
  .b .c {
    border-color: maroon;
  }

  /* can be narrowed more explicitly */
  :scope .b .c {
    font-weight: bold;
  }
}
```

This would change how people use nesting, and it will take some time for authors to get used to it - with `:is()`, `@scope`, and also `&` - similar to the same way we've had to re-think variables as custom properties. I'm not sure that needs to derail the project. 

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


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

Received on Thursday, 19 January 2023 18:19:08 UTC