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

故事扮演 提交于 2019-12-02 14:58:21

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:

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/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!