如何使用BEM正确设置元素的范围？

问题描述

给定以下BEM树结构，其中存在五个嵌套层：

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

 code>语义上绑定到 byline 和 story 上下文，但在 features-top 和 collection-main 块，什么是最好的BEM名称？

Since an author is semantically tied to the byline and the story context, but meaningless under the features-top and collection-main blocks, what is the best BEM name?
collection-main__author
features-top__author
story__author (best?)
story__byline__author
byline__author
如果引入了新的功能块，会发生什么？
What happens if a new features block gets introduced?
collection-main__features-top__story__byline__author (target)
collection-main__features-bottom__story__byline__author

features-top__story__author
story--features-top__author (best?)
最后，如果另一个 
Finally, what happens if another collection block gets added and we want to style the second author element in the list?
collection-main__features-top__story__byline__author
collection-main__features-bottom__story__byline__author (target)
collection-sub__features-top__story__byline__author
collection-sub__features-bottom__story__byline__author
我们会这样做吗？
story--collection-main--features-bottom__author
必须有更好的选项。
推荐答案
  BEM禁止在CSS中的元素中放置元素 
 
 BEM标记中最典型的错误 - 写一个 block__element__element 。 
您必须创建新的块，而不是复制DOM树。
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.
例如：
 
 Right HTML：
For example:
Right HTML:
<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>
右侧CSS：
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
 如果你需要创建一个元素的元素，那么你需要创建一个新的块或者使你的bem树有一个嵌套的元素！ 
 WRONG：
<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem1__elem2'></div>
    </div>
</div>
右键＃1：建立新区块
<div class='block1'>
    <div class='block2'>
        <div class='block2__elem'></div>
    </div>
</div>
 RIGHT＃2：使用单个嵌套元素创建您的bem树
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>
 注意 - 你不能将元素放在css的元素中，并应将元素放入一个元素到html！ DOM树和BEM树可以不同。
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.
 不要写出奇怪的名字，  
错误：
.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>
嵌套的html元素是一个DOM树。
 
您写的类是BEM树。
 
感觉不同！
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树：
<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 {}
参考文献：
元素是块的一部分！不是元素的一部分！ 
阅读Vitaly Harisov，BEM方法的作者： 
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
另请参阅：
 
 
  
 
 
  
 
 
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
在Web会议WebCamp：前端开发人员日有关于此主题的报告（俄语）： 
 + slides： 
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/
                        
这篇关于如何使用BEM正确设置元素的范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！