[csswg-drafts] [css-nesting] Proposal to use `()` instead of `&` (#6811)

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

== [css-nesting] Proposal to use `()` instead of `&` ==
Is it decided that `&` is to be used to represent the parent selector?

I get that it’s already used in some preprocessors, and perhaps has a conceptual relationship to C’s `&` (address of).

Yet it feels far from ideal to me. It has strong connotations with boolean operations, and I believe it will be mistaken for an operator for CSS newbies to learn alongside `+`, `>`, `~`, `,`. It also prevents future use of `&` as a boolean operator in selectors. A string such as `this` would be clearer and have precedent in web development.

The string `this` almost certainly wouldn’t do, but nevertheless it seems to me that we need something that represents “this”. I therefore propose `()` as a reasonably well-suited character sequence that represents “this” visually.

Examples:

```css
.foo {
 color: red; /* .foo */

 .bar {
  color: blue; /* .foo .bar (shorthand) */
 }

 ().bar {
  color: green; /* .foo.bar */
 }

 () .bar {
  color: yellow; /* .foo .bar */
 }

 .bar() {
  color: cyan; /* .bar.foo */
 }

 .bar () {
  color: purple; /* .bar .foo */
 }
}
```

Thoughts?

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


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

Received on Wednesday, 10 November 2021 17:25:14 UTC