BEM 方法论：块外的元素

Question

想知道 BEM 方法是否正确。假设我有一个 component/block "box".

<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" 以某种方式在块 "box" 之外。 "box__item" 然后有一些具体的东西。

.box__item {
    margin-bottom: 20px;
 }

这样做 "allowed" 还是我需要完全不同的东西，比如 "box-wrapper__list" 和 "box-wrapper__item"。

感谢您发表评论。 :)

Answer 1

因为元素在 .box 之外，所以不，给它们这些类.

没有意义

你必须考虑你的基础components/blocks（想想'building blocks'）是什么。

component/block 是您可以（理想情况下）将其放置在布局中的任何位置并且仍然以相同的方式 look/behave 放置的东西，无论父元素或相邻元素如何。 BEM 命名约定试图在这个意义上强制执行 CSS "modularity"。

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

参考文献：

BEM key concepts

BEM naming conventions

Answer 2

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

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

Answer 3

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

但是在你目前的情况下你不应该使用它来定位，你的包装版本是正确的。

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

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

BEM 方法论：块外的元素

BEM Methology: Elements outside Block

html

css

dom

bem