[csswg-drafts] [css-syntax] keeping the indent level under control in modern CSS with `@layer`, `@scope`, nesting, ... (#8912)

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

== [css-syntax] keeping the indent level under control in modern CSS with `@layer`, `@scope`, nesting, ... ==
Example :

```css
@layer components {
 @scope (.my-component) to (.child-component-slot > *) {
  .my-component {
   color: cyan;
   padding: 0.5rem;

   :hover {
    color: blue;
   }

   @media (min-width: 768px) {
    padding: 1rem;
   }
  }
 }
}
```

This is starting to look a bit like the callback hell from JS :

```js
getBeef("foo", (rawBeef) => {
 sliceBeef(rawBeef, (slicedBeef) => {
  cookBeef(slicedBeef, (cookedBeef) => {
   serveBeef(cookedBeef, (servedBeef) => {
    console.log(servedBeef);
   });
  });
 });
});
```

-------

Some of this can be externalized by adding bits of it to `@import` :

`@import "my-component.css" layer(components);`

But this isn't always possible or good practice for maintainable code.
Often the reason for wrapping code in an at rule is tightly coupled with the code being wrapped.

-------

Using nesting is a choice and authors can choose not to nest.

-------

`@when` does not help here because it wasn't designed for `@layer`, `@scope`, `@container`, ...
Personally I don't think `@when` should be shipped at all because it doesn't solve the issue fully. Maybe I am wrong here and `@when` could be used for all at rules?

-------

The underlying issue is that at rules can only be "combined" or "stacked" by nesting them. With the introduction of new at rules and nested CSS source code will only become more heavily nested and less readable.

I don't have a concreet proposal for a syntax that could help here.
I do however think it is something that should be explored.

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


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

Received on Saturday, 3 June 2023 10:35:36 UTC