BEM 方法论：Block 之外的元素

Question

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

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

这个盒子可以在任何地方使用。但是例如这个框也可以用在列表中。

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

像这样调用 DOM-Classes 是正确的吗？

<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”不知何故在块“box”之外。“box__item”然后有一些特定的东西。

.box__item {
    margin-bottom: 20px;
 }

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

感谢您的评论。:)

Answer 1

由于元素在.boxthen no之外，给它们提供这些类是没有意义的。

您必须考虑您的基本组件/块（想想“构建块”）是什么。

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

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

参考：

BEM 关键概念

BEM 命名约定