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

Question

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

collection-main__features-top__story__byline__author

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

由于 anauthor在语义上与bylineandstory上下文相关，但在features-topandcollection-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添加了另一个块并且我们想要为列表中的第二个作者元素设置样式会发生什么？

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

一定有更好的选择。

score 41 · Accepted Answer

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-tree

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

请注意 - 您不能将元素放在 css 中的元素中，但您可以并且应该将元素中的元素放入 html 中！DOM-tree 和 BEM-tree 可以不同。

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

错误的：

.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 {}

参考：

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

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

像“block__elem__elem___elem”这样的类名意味着编码器不了解 BEM 中的任何内容。

另请阅读：

在网络会议 WebCamp: Front-end Developers Day 上有一份关于此主题的报告（俄语）：https ://www.youtube.com/watch?v=kBgHdSOj33A + 幻灯片：http: //ihorzenich.github.io /talks/2015/frontendweekend-bem/

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

1 回答 1

Related

Reference