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:

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:

RIGHT #1: Make a new block

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

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:

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

DOM-tree:

  

    
      
    
  


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

BEM-tree:

  

    
      
    
  


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