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

One problem I ran into using `@nest` with the current syntax (through a preprocessor) is that it was unclear to me, as an author, how to use `@nest` with selector lists. E.g. this was my CSS:

```css
&.small,
.small.button-group > & {
 font-size: var(--font-size-x-small);
}
```

Do I prepend the whole thing with `@nest`?

```css
@nest &.small,
.small.button-group > & {
 font-size: var(--font-size-x-small);
}
```

That looks *weird* though, especially since the `@nest` is before a selector that isn't supposed to need it.
Do I prepend each selector with `@nest`?

```css
@nest &.small,
@nest .small.button-group > & {
 font-size: var(--font-size-x-small);
}
```

Nah, surely not. It would look especially weird if the selector was single line.

Maybe I prepend only the complex selector that actually needs it?

```css
&.small,
@nest .small.button-group > & {
 font-size: var(--font-size-x-small);
}
```

In the end I figured out which one it was, because the others wouldn't compile, and by looking at the spec, but the fact that all of these possible syntaxes looked plausible is a bit of a red flag that the syntax isn't that intuitive. That in itself may argue for ditching `@nest` and going for one of the enclosing syntaxes proposed.

@tabatkins thoughts?

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


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

Received on Monday, 11 October 2021 16:05:41 UTC