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

Hey y'all, I just saw [the poll](https://developer.chrome.com/blog/help-css-nesting/#example-1-direct-nesting). Did I miss something? Why is the brackets syntax shown as requiring ampersands somewhere in the selector of _every_ nested rule? Isn't that redundant in the cases I've highlighted below?

```scss
/* Example 1 */

.foo {
  color: #111;

  {
    & .bar { /* <----  Unnecessary? */
      color: #eee;
    }
  }
}

/* Example 3 */
.foo, .bar {
  color: blue;

  {
    & + .baz, /* <----  Unnecessary? */
    &.qux {
      color: red;
    }
  }
}

/* Example 4 */
figure {
  margin: 0;

  {
    & > figcaption { /* <----  Unnecessary? */
      background: lightgray;

      {
        & > p { /* <----  Unnecessary? */
          font-size: .9rem;
        }
      }
    }
  }
}

/* Example 9 */
dialog {
  border: none;

  {
    &::backdrop {
      backdrop-filter: blur(25px);
    }

    & > form { /* <----  Unnecessary? */
      display: grid;

      {
        & > :is(header, footer) { /* <----  Unnecessary? */
          align-items: flex-start;
        }
      }
    }
  }

  {
    html:has(&[open]) {
      overflow: hidden;
    }
  }
}
```

Doing this basically entirely negates the whole purpose of having brackets (or parentheses) enclose multiple nested selectors in the first place. Did I miss something? 😕

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


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

Received on Thursday, 28 July 2022 15:36:33 UTC