BEM is just an awkward workaround for the lack of nesting.

You’re manually creating nesting hierarchies and naming them (something a computer should be doing).

And yes, the moment you move something, everything breaks. Because instead of moving/renaming just the parent selector you have to move/rename all the related child selectors.

No what I mean by move something I mean adjust HTML structure, and deeply nested stylesheet means less flexible code. You can move anything within a BEM block without breaking style, instead of couple the CSS and HTML structure, which doubles every change.

And BEM is a workaround of names pace, not nesting. Nesting is not what CSS lack of. Instead what CSS really lack for is basic abstraction like function (same as function component in react to HTML). Given CSS is basically similar to key value pair (data), a first class function model would solve most of the problems - reusing, encapsulation, abstraction etc.

There's no performance impact. Styles are precompiled locally before deployment.

There is, at runtime browser needs to do extra matching.

https://stackoverflow.com/questions/13829959/nested-selector...

It's about Less but the same rule applies to CSS and Sass.

Note the date on that. It’s my understanding that with modern browsers, except in pathological cases, selector performance is pretty much a non issue.

When we are talking about nesting we are not talking about generating `.page #left-section .box .button {}`... This would be bad. Nesting used properly is something like `.myWidget .button, .myWidget .title, .myWidget .main-section {}`. You can then move .myWidget anywhere you want and the styles would follow.