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

> Thank you [@LeaVerou](https://github.com/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 :
> 
> :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 alt="Screenshot of the source code above with the first group of custom properties collapsed" width="474" src="https://private-user-images.githubusercontent.com/11521496/324164394-23e1bb84-99ae-4550-9689-7bd482bed387.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzgyMDY1NzcsIm5iZiI6MTczODIwNjI3NywicGF0aCI6Ii8xMTUyMTQ5Ni8zMjQxNjQzOTQtMjNlMWJiODQtOTlhZS00NTUwLTk2ODktN2JkNDgyYmVkMzg3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTMwVDAzMDQzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWIxMzE1NzUzODRhN2NlZmVkZThmOTYxZWQxNDZlNjJjYzU2OGExNmVhZmRiOGUyNGVkODRkNmNiYWFhMGFiMjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.dNl_N5Rpiwcm3xfPaRZ-Tefcm6chm1q32ZOFMGRu0TE">
> [@tabatkins](https://github.com/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, this can all be 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.





https://javascripter.space/questions/can-you-reference-documentstylesheetscssrules-by-specifying-a-rule-name

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


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

Received on Thursday, 30 January 2025 03:04:57 UTC