3 ms·

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 sen

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.

psychometry 8y ago
There's no performance impact. Styles are precompiled locally before deployment.
- namelosw 8y ago
  There is, at runtime browser needs to do extra matching. https://stackoverflow.com/questions/13829959/nested-selectors-performance-impact-and-less https://stackoverflow.com/questions/13829959/nested-selector... It's about Less but the same rule applies to CSS and Sass.
  - steveax 8y ago
    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.
dmitriid 8y ago
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.
- namelosw 8y ago
  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.
Raphmedia 8y ago
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.

psychometry 8y ago

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

namelosw 8y ago
There is, at runtime browser needs to do extra matching. https://stackoverflow.com/questions/13829959/nested-selectors-performance-impact-and-less https://stackoverflow.com/questions/13829959/nested-selector... It's about Less but the same rule applies to CSS and Sass.
- steveax 8y ago
  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.

dmitriid 8y ago

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.

namelosw 8y ago
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.

Raphmedia 8y ago

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.