Question

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

collection-main__features-top__story__byline__author

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

由于author在语义上与byline和story上下文绑定，但在features-top和collection-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

必须有更好的选择。

Answer 1

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！

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>

右＃2：使用单个嵌套元素制作你的bem树

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

注意 - 你不能把元素放在css中的元素中，但你可以而且应该把元素放在html中！ DOM树和BEM树可以不同。

不要写出奇怪的名字，将元素名称放在块的名称中！

WRONG：

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

因为当您尝试移动块时，您会遇到奇怪名称的问题：

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

嵌套的html-elements是一个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 {}

参考文献：

＆＃34;元素是块的组成部分，不能在它之外使用。＆＃34; https://en.bem.info/methodology/key-concepts/#element

元素是块的一部分！不属于元素！阅读BEM-methodology的作者Vitaly Harisov：https://twitter.com/harisov/status/403421669974618112

Classname like＆＃34; block__elem__elem ___ elem＆＃34;意味着编码员对BEM没有任何理解。

另请阅读：

网络会议上有一份报告（俄文）WebCamp：关于这个主题的前端开发者日：https://www.youtube.com/watch?v=kBgHdSOj33A +幻灯片：http://ihorzenich.github.io/talks/2015/frontendweekend-bem/

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

1 个答案: