First nesting syntax survey
Two competing syntaxes need your help in determining which should be championed through to a specification candidate.

- Option 1: @nest: This is the current specified syntax in CSS Nesting 1. It offers a convenient way to nest appending styles by starting new nested selectors with
&
. It also offers@nest
as a way to place the&
context anywhere inside a new selector, like when you’re not just appending subjects. It’s flexible and minimal but at the expense of needing to remember@nest
or&
depending on your use case.- Option 2: @nest restricted: This is a stricter alternative, in an attempt to reduce the expense mentioned of remembering two nesting methods. This restricted syntax only allows nesting to occur following
@nest
, so there’s no append only convenience pattern. Removing ambiguity of choice, creating one easy to remember way to nest, but sacrifices terseness in favor of convention.- Option 3: Brackets: In order to avoid the double-syntax or extra clutter involved with the
@nest
proposals, Miriam Suzanne and Elika Etemad proposed an alternative syntax that instead relies on additional curly-brackets. This provides syntax clarity, with only two extra characters, and no new at-rules. It also allows nested rules to be grouped by the type of nesting required, as a way of simplifying multiple similarly nested selectors.
Examples
Option 1: @nest
.foo {
color: #111;
& .bar {
color: #eee;
}
}
Option 2: @nest always
.foo {
color: #111;
@nest & .bar {
color: #eee;
}
}
Option 3: brackets
.foo {
color: #111;
{
& .bar {
color: #eee;
}
}
}
Results
Option 1 won the survey with 87% of the vote but option 3 won out in the extensive debate the CSS Working Group.
Second nesting syntax survey
The CSS Working Group is continuing a debate over the best way to define nesting in CSS.

- Option 3: Non-letter start: Nested style rules can be added directly into a declaration block, but cannot start with a letter.
- Option 4: Postfix block: Style rules allow for an optional, second block after the declaration block that contains only style rules.
- Option 5: Top-level @nest: Nested style rules are declared in a dedicated, independent at-rule that accepts only style rules. Declarations can be nested using & { … }.
Examples
Option 3: Non-letter start
article {
font-family: avenir;
& aside {
font-size: 1rem;
}
}
Option 4: Postfix block
article {
font-family: avenir;
}
{
aside {
font-size: 1rem;
}
}
Option 5: Top-level @nest
@nest article {
& {
font-family: avenir;
}
aside {
font-size: 1rem;
}
}
Results
The results aren’t finalised yet (I don’t think), but at the time of writing, option 3 has 76% of the vote.
My opinion (the only correct one 😉)
I think option 3 is the best, as do most other people going by the survey results. But with a caveat, I think the &
should be required. This is both for parsing and for mental model consistency. Obviously, I’m no CSS spec author, but I think having the &
be required would make things much easier for the parser. And on the side of user’s mental models, not having the ambiguity around the &
is a good idea. Though as mentioned in the first Chrome Developers post you could use a linter to enforce &
usage.