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

I've finished with the syntax conversions (I wish there was a way to re-order the files in a Gist): https://gist.github.com/proimage/6a74e303265661531c7c72545dba4068

I have some thoughts about the process I just went through generating these nesting syntax variations, but I need to contextualize them first. **These thoughts are related to the process of _converting existing SCSS_ over to the three polled formats. They may or may not be applicable to the process of _writing these syntaxes from scratch._**

### Thoughts on the SCSS -> `@nest` syntax conversion:
- Conversion was easy. 👍
- Having `&` in front of every nested rule makes it harder to differentiate between `&.foo` and `& .foo` situations. 👎

### Thoughts on the SCSS -> `@nest` syntax conversion:
- Conversion was still somewhat easy, but more verbose. 👎
- The resulting code looks very much not DRY—a repetitive & redundant mess of `@nest & .foo` _everywhere_. 👎
- It's still hard to differentiate between `@nest &.foo` and `@nest & .foo`, only now there's more visual clutter to try to ignore. 👎 

### Thoughts on the SCSS -> `{ }` brackets syntax conversion:
- Conversion was the most difficult (adding new lines above and below nested code, adding brackets, and indenting the nested code). I don't think this would be an issue for writing _new_ code, but still...👎
- While I think the resulting code would be helped by proper syntax highlighting, the myriad of brace pairs can be visually confusing, especially when there are multiple closing brackets. 👎
- Ironically, while the brackets themselves aren't great (only being at the start and end of blocks of nested selectors), the extra indentation they invoke really makes it easier to differentiate between parent properties, child selectors, and child properties. 👍
- The nested selectors themselves remain nice and clean, with the SCSS-like syntax I'm familiar with still intact (where child element selectors are clean, but modifiers to the current parent start with `&`). 👍 

---

With all that said, I think the ideal solution from my own, developer POV (i.e. I'm not a parsing engine coder) would be an alternative of the `@nest` syntax, where the `&` char is used to define a "modifier" selector of the parent, but (here's the difference) where a _different_ character would be used to indicate a _child element_ selector. Something like this:

```css
.parent {
  font-size: 18px;
  color: blue;
  @nest html.hideParent & {
    display: none;
  }
  &.modifier {
    font-weight: bold;
  }
  % .child {
    display: flex;
  }
}
```

I don't know if that's possible or not, but it would basically solve the one remaining issue I have with the `@nest` syntax (differentiation between modifier and child selectors). 🤷‍♂️ 

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


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

Received on Saturday, 30 July 2022 11:18:01 UTC