Gregory's ServerGetting deep into the syntax for CSS Nesting, exploring the options…
Here’s a quick & overly simplistic preview...
Option 3:
article {
font-family: avenir;
& aside {
font-size: 1rem;
}
}
Option 4:
article {
font-family: avenir;
} {
aside {
font-size: 1rem;
}
}
Option 5:
@nest article {
& {
font-family: avenir;
}
aside {
font-size: 1rem;
}
}
Which all become:
article {
font-family: avenir;
}
article aside {
font-size: 1rem;
}
Thoughts?
Anonymous poll
Poll
Option 3
218
79.9%
Option 4
15
5.5%
Option 5
19
7%
(show results)
273 people voted. 21
7.7%
Voting ended 15 Dec 2022 at 1:34.
Quite a few people are replying, asking why CSS nesting can't just work like Sass does.
Well, it can't.
We *all* wish it could.
But it can't because of the way browser parsing engines work: if they see a sequence like `element:pseudo`, they’ll parse the entire style rule as if it were a `property: value` declaration.
So Option 3 vs 4 vs 5 is the our choice for what to do instead.