Re: [csswg-drafts] [css-syntax][css-nesting] Design of `@nest` rule (#10234)

Thank you @LeaVerou.

> As a design principle, I don't think CSS should have author-facing syntax that provides no benefit to authors. Either we should come up with actual use cases for `@nest`

I actually want the `@nest` rule but as a more generic organizational tool.

In JavaScript it is possible to write blocks without any condition. I use this very frequently to group bits of code in a larger section.

This new at-rule could serve a similar purpose. Most authors will never use it but they could to organise and structure their code.

Today we use either multiple rules with the same selector, or comments when we want to group lists of declarations. Neither is really good.

This is our list of custom props when we start a new project :

```css
:root {
 /* #region Colors */
 --color-foreground: rgb(0 0 0);
 --color-background: rgb(255 255 255);
 --color-grey-40: rgb(108 112 108);
 --color-warning: rgb(242 149 0);
 --color-error: rgb(207 0 0);
 /* #endregion Colors */

 /* #region Typography */
 --font-sans: "Helvetica Neue", sans-serif;
 --font-serif: "Georgia", serif;
 /* #endregion Typography */

 /* #region Spacers */
 --space-1--px: 1px;
 --space-1--rem: 0.0625rem;
 --space-8--px: 8px;
 --space-8--rem: 0.5rem;
 --space-16--px: 16px;
 --space-16--rem: 1rem;
 --space-32--px: 32px;
 --space-32--rem: 2rem;
 --space-48--px: 48px;
 --space-48--rem: 3rem;
 /* #endregion Spacers */
}
```

We need to add comments before and after each group so that we can have folding regions in code editors.

<img width="474" alt="Screenshot of the source code above with the first group of custom properties collapsed" src="https://github.com/w3c/csswg-drafts/assets/11521496/23e1bb84-99ae-4550-9689-7bd482bed387">


@tabatkins has also stated that they aren't attached to the name of this at-rule. Something that isn't tied to nesting would be nice.

---------

If on the other hand, if this all can be purely implementation details then I prefer that.
I however fear that we can only kick this bucket further down the road and that some API will surface the warts.

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


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

Received on Saturday, 20 April 2024 08:29:06 UTC