[csswg-drafts] [css-nesting] support nesting at-rules

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

== [css-nesting] support nesting at-rules ==
There are situations when nesting at-rules is more intuitive than spreading rule selectors.

Consider the following CSS for a typical website ”top bar”:

```css
.topbar {
  inset: 0 0 auto;
  position: fixed;
}

.topbar-link {
  padding: 15px;
}

@media (width < 1024px) {
  .topbar {
    position: absolute;
  }
}

@media (width < 640px) {
  .topbar {
    position: static;
  }

  .topbar-link {
    padding: 10px;
  }
}
```

In this example, it is easier to scan at-rules nested within style rules, rather than the other way around. The occasional side-effect of brevity  (due to the lack of selector repetition) further improves readability:

```pcss
.topbar {
  inset: 0 0 auto;
  position: fixed;

  @media (width < 1024px) {
    position: absolute;
  }

  @media (width < 640px) {
    position: static;
  }
}

.topbar-link {
  padding: 15px;

  @media (width < 640px) {
    padding: 10px;
  }
}
```

As at-rule nesting is such a common feature in CSS Preprocessors, is is often conceptually bundled with “nesting” in general. This is _not_ the case in the current css-nesting proposal, which is why I’ve created this separate issue.

I’m not sure how at-rule nesting would be added to the specs. It may (only?) require updates to css-syntax and css-conditional ([citation](https://github.com/w3c/csswg-drafts/issues/2752#issuecomment-396082842)). Now seems like a good time to discuss this, as similar changes may be needed to support the `@nest` rule.

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

Received on Friday, 6 July 2018 14:00:43 UTC