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@nestas 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@nestor&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
@nestproposals, 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 votebutoption 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.