About nested components

[lolenko]

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

[emmgfx]

.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

[rstacruz]

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...

[lolenko]

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.

[ValdasK]

Avoid rule nesting at all costs, that's where BEM shines.