给定以下BEM树结构,其中存在五个嵌套级别:

collection-main__features-top__story__byline__author

根据BEM的命名约定,其中元素是块的一部分,而在其所属的块之外没有任何意义,命名author类的正确方法是什么?

由于author在语义上与bylinestory上下文相关联,但是在features-topcollection-main块下毫无意义,因此最佳BEM名称是什么?
collection-main__author
features-top__author
story__author (best?)
story__byline__author
byline__author

如果引入了新的features块会怎样?
collection-main__features-top__story__byline__author (target)
collection-main__features-bottom__story__byline__author

features-top__story__author
story--features-top__author (best?)

最后,如果添加了另一个collection块,并且我们想要设置列表中第二个author元素的样式,会发生什么?
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树。

例如:
正确的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-tree!

错误:
<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>

正确#2:使用单个嵌套元素制作bem树
<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
</div>

注意-您不能将元素放在CSS的元素中,但是可以并且应该将元素放入html! DOM树和BEM树可以不同。

不要写奇怪的名字,把元素的名字放在块的名字里!

错误:
.block {}
.block-elem1 {}
.block-elem1__elem2 {}

因为尝试移动块时遇到奇数名称问题,所以:
<div class='other-block'>
    <div class='block-elem1'></div>
</div>

嵌套的html元素是DOM树。
您编写的类的名称是BEM树。
感到不同!

DOM树:
<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 {}

参考文献:



元素是块的一部分!不属于元素!
阅读BEM方法论的作者Vitaly Harisov: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

  • 网络 session WebCamp:前端开发人员日上有一个有关此主题的报告(俄语):https://www.youtube.com/watch?v=kBgHdSOj33A
    +幻灯片:http://ihorzenich.github.io/talks/2015/frontendweekend-bem/

    10-05 20:54
    查看更多