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

I'm surprised the "parser switch" option suggested by LeaVerou got so lost in the mix. I actually liked that option a lot. It doesn't have the inconsistencies of knowing where to do what, it doesn't have the double indention and it doesn't require continuous repetition of the `@nest` keyword. I'll highlight the way it works here once again. Essentially, after your regular style declarations, you can write `@nest;` to start your nested rules. For example:
```css
button {
    font-size: inherit;
    color: white;
    background: blue;
    border: none;

    @nest;
    &.btn-special {
        color: yellow;
        background: gold;
        
        @nest;
        &.btn-large { font: 3rem / 1.5 fantasy, sans-serif; }
    }
    menu & {
        text-decoration: underline;
    }
}
```
This is
 - **easy to read**. It has the same visual structure as SCSS. In fact, it might be even easier; the syntax enforces the style rules to be before any nesting, making sheets predictable, and given most developers have syntax highlighting, the `@nest;` just makes it a tiny bit easier to recognize where the declarations are (above the `@nest`) and where the nesting happens (below the `@nest`).
 - **easy to edit**. Adding or removing a declaration? No problem, you can do that just like you used to. Adding a nested rule? Write `@nest;` if it doesn't have it already, and write your nested styles as you wish. No need to worry about where the `&` goes in your selectors, and no need to prefix every single nested selector. Removing a nested rule? Simply... remove it. If there's a dangling `@nest;`, you could even leave it and it'd be fine; or you can remove it, keeping your sheets a bit cleaner.
 - **easy to learn**. The rule is simple. You nest, you need a `@nest;` after your declarations. The nested selectors are then just SCSS-style selectors with `&`.

I struggle to see the issues with this. The CSSOM would be relatively simple, leaving out the `@nest;` rule completely (as this would already be indicated by the fact there are child selectors).

Anyway, I just wanted to pull this option out of the dark in case it was overshadowed by the other three options. Would love to hear what people's opinions are on this one.





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


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

Received on Thursday, 1 September 2022 05:34:53 UTC