html - BEM 方法论 : Elements outside Block

Question

想知道 BEM 方法是否正确。假设我有一个组件/ block “盒子”。

<div class="box">
    <div class="box__title">Box Title</div>
</div>

这个盒子可以随处使用。但是例如这个框也可以用在列表 ex 中。

<ul>
    <li>
        <div class="box">
            <div class="box__title">Box Title</div>
        </div>
    </li>
</ul>

这样调用 DOM 类是正确的吗？

<ul class="box__list">
    <li class="box__item">
        <div class="box">
            <div class="box__title">Box Title</div>
        </div>
    </li>
</ul>

所以“box__list”和“box__item”在方 block “box”之外。 "box__item"然后有一些特定的东西。

.box__item {
    margin-bottom: 20px;
 }

这样做是“允许”的，还是我在这里需要完全不同的东西，比如“box-wrapper__list”和“box-wrapper__item”。

感谢评论。 :)

Answer 1

因为元素在 .box 之外，所以不，给它们这些类没有意义。

您必须考虑您的基本组件/ block (想想“构建 block ”)是什么。

组件/ block 是您可以(理想情况下)放置在布局内的任何位置并且仍然具有相同外观/行为的东西，无论父元素或相邻元素如何。 BEM 命名约定试图在这个意义上强制执行 CSS“模块化”。

在我看来，您肯定有一个 .box 组件。如果您认为该列表应该是另一个组件/ block ，则将其命名为其他名称，就像您命名 block 而不是元素一样。

引用资料:

BEM key concepts

BEM naming conventions