Nesting is bad, because moving any element would break your style. And there's also performance impact.
I found scoped css like component or BEM just make sense, which only encourage you nest one level in block namespace.
I found scoped css like component or BEM just make sense, which only encourage you nest one level in block namespace.
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.
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.
https://stackoverflow.com/questions/13829959/nested-selector...
It's about Less but the same rule applies to CSS and Sass.