rscss
rscss copied to clipboard
About nested components
Your structure does't work when we have nested components with same elements names.
.foo-1 {
.bar {}
}
.foo-2 {
.bar {}
}
.foo-1
.bar
.foo-2
.bar
In this case selector .foo-1 .bar affects on "bar" element of "foo-2" component
In BEM it's fine
.bar can be inside .foo-1 or .foo-2 and may have different properties. Is not the same element.
.foo-1
.bar
.foo-2
.bar
Indeed that's true: https://github.com/rstacruz/rscss#bleeding-through-nested-components
You may need to use the child selector (> .bar
) in those cases. (bonus: its more efficient than descendant selectors .foo-1 .bar
!)
actually on that note, it might be a good idea to recommend >
everywhere...
In advance we don't know about nested case, so components are't independent.
We are limited by element nesting level in HTML, if we write >
everywhere. Components can't always be quite simple.
Avoid rule nesting at all costs, that's where BEM shines.