I have been using this forever in SASS but I have heard criticisms about it. Are there any reasons this feature would be bad?
The largest user-facing downside of nesting is over-nesting which is classed under “feature misuse”; it is best avoided by sticking to a BEM-like selector pattern and restricting yourself to sensible levels of nesting (1 or 2 levels) in most cases.
This lets you avoid writing overly-specific CSS, which in turn means you avoid unnecessary CSS bloat. The bloat comes because of a few reasons: overly-specific CSS is hard to reuse, which leads to repetition; and, to a lesser extent, the lengths of selectors can get extremely long and cause a lot of unnecessary work for the browser – in extra time to download, extra parse time, and more complicated application.
In terms of browser’s implementation of this, the most worrying seems to be the possibility of combinatorial explosion which is already being discussed.
The reason that this being tested as an issue is largely based on the amount of tags generated at the time of post-processing.
With native nesting, I’d be surprised if this will be as popular as it is today.
I may be biased, though. I think that BEM is bad in that it seems like someone wanted to make things flat because they didn’t understand how to make specificity work for them instead of against them.
Well, the nesting present in SASS is more ambiguous than this, so I believe there are cases that other people dislike that ambiguity, but with native nesting we’ll have a chance for it to be designed in a much better way.
Common criticisms of selector nesting are:
Having a big change like this to CSS is going to break/change a lot of tooling that wasn’t originally designed to CSS’s syntax, but was instead built with an idea of what CSS was based on what it used to look like.
I’m not a personal fan of preprocessors or nesting, but having it come to CSS natively is a big change, and will totally change the way most people will write CSS. Exciting times!