Understanding the Native CSS Nesting Specification: Community Demand, Working‑Group Process, and Future Syntax

The author, a front‑end engineer from 360 Search and a member of the W3C CSS Working Group, shares his experience following the CSS‑nesting issue and explains why native nesting is valuable for web developers.

Community demand for native nesting is illustrated with a timeline of statements from notable developers and designers (e.g., Chris Coyier, Lea Verou, Sara Soueidan) who repeatedly cite nesting as a top‑requested feature.

The CSS Working Group’s process is described, showing how the issue moved from an "unknown/future spec" label to an Editor Draft (ED) stage, with stages such as WD, CR, PR, and REC explained in a blockquote.

Three main parts of the article are presented:

Background: developer voices and the history of nesting proposals.

Working‑group actions: discussion flow, decisions to add only nesting syntax sugar, and the rationale for keeping the & prefix to avoid parsing ambiguities.

Future native nesting syntax: the new nesting selector & and the @nest rule, with concrete examples.

Direct nesting example:

.foo {
  color: blue;
  > .bar { color: red; }
}
/* equivalent to */
.foo { color: blue; }
.foo > .bar { color: red; }

Using the @nest rule:

.foo {
  color: red;
  @nest & > .bar { color: blue; }
}
/* equivalent to */
.foo { color: red; }
.foo > .bar { color: blue; }

The article also notes invalid patterns that omit the & selector, explaining why the prefix is mandatory for unambiguous parsing.

Finally, readers are invited to comment, submit issues to the W3C CSSWG GitHub repository, and consult related specifications (CSS Nesting Module Level 3, CSS Scoping Module Level 1, CSS Cascading and Inheritance Level 3).