BEM 方法：块外的元素答案

【问题标题】：BEM Methology: Elements outside BlockBEM 方法：块外的元素
【发布时间】：2017-03-07 13:15:24
【问题描述】：

想知道 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”。

感谢您的评论。 :)

【问题讨论】：

如果您发现自己处于这种情况，我会说您没有正确“看到”组件。您可能会将组件（在您的情况下为 .box）与实际内容混淆。

标签： html css dom bem

【解决方案1】：

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

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

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

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

参考资料：

BEM key concepts

BEM naming conventions

【讨论】：

【解决方案2】：

所以现在这更有意义 - 谢谢！

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

【讨论】：

【解决方案3】：

是的，#b_ 元素可以放在 DOM 中他的块之外。不同的块和元素也可以在 DOM 树中相交：https://en.bem.info/forum/43/（来自 BEM 方法作者的证明）。

但在您当前的情况下，您不应该将其用于定位，您的带有包装器的版本是正确的。

【讨论】：

【解决方案4】：

我完全理解你的问题背后的思考过程，这是我试图解决的问题。

我想出的解决方案是停止使用__wrap 命名约定并改为__inner 或content。本质上是一个最能描述内部的词，而不是像 wrap 那样的外部。

从那里我们可以创建一个这样的示例。

这确实意味着你将不得不稍微改变你应用类的方式，但我确实发现它有助于封装整个块，而不是必须处理与 box__wrap 在外部创建的模棱两可。

<div class='box'>
  <div class='box__inner'> 
    <div class='box__head'>head</div> 
    <div class='box__main'>main</div>
    <div class='box__foot'>foot</div>    
  </div>
</div>

希望我的回答对你有所帮助，

【讨论】：