How to properly set an element's scope using BEM?

Question

Given the following BEM tree structure, where five nested levels exist:

collection-main__features-top__story__byline__author

according to BEM\'

Answer 1

BEM prohibits put an elements in the elements in CSS!
You make the most typical error in BEM markup - writing a block__element__element. You must create new blocks, rather than copying DOM-tree.

For example:
Right HTML:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>

Right CSS:

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

If you need to make an element of an element, then you need to make a new block or make your bem-tree with a single nested elements!

WRONG:

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem1__elem2'></div>
    </div>
</div>

RIGHT #1: Make a new block

<div class='block1'>
    <div class='block2'>
        <div class='block2__elem'></div>
    </div>
</div>

RIGHT #2: Make your bem-tree with a single nested elements

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
</div>

Pay attention - you can not put elements in a elements in the css, but you can and should put elements in a elements into html! DOM-tree and BEM-tree can be different.

Do not write strange names, putting the element name in the name of the block!

WRONG:

.block {}
.block-elem1 {}
.block-elem1__elem2 {}

Because you get a problem with odd names when you try to move the block:

<div class='other-block'>
    <div class='block-elem1'></div>
</div>

Nested html-elements is a DOM-tree.
The names of the classes you write is a BEM-tree.
Feel the difference!

DOM-tree:

<ul>
  <li>
    <a>
      <span></span>
    </a>
  </li>
</ul>

.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}

BEM-tree:

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

.menu {}
.menu__item {}
.menu__link {}
.menu__text {}

References:

"An element is a constituent part of a block that can't be used outside of it." https://en.bem.info/methodology/key-concepts/#element

An element is a part of a block! Not part of element! Read Vitaly Harisov, the author of BEM-methodology: https://twitter.com/harisov/status/403421669974618112

Classname like "block__elem__elem___elem" means that coder didn't understand anything in BEM.

Read also:

• https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2
• http://getbem.com/faq/#css-nested-elements

There is a report (in Russian) on a web conference WebCamp: Front-end Developers Day about this topic: https://www.youtube.com/watch?v=kBgHdSOj33A + slides: http://ihorzenich.github.io/talks/2015/frontendweekend-bem/