Question

不知道BEM方式是否正确。我们假设我有一个组件/块＆＃34;框＆＃34;。

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

所以＆＃34; box__list＆＃34;和＆＃34; box__item＆＃34;在某种程度上是在块＃34;框内＃34;。＆＃34; box__item＆＃34;然后有一些特定的东西。

.box__item {
    margin-bottom: 20px;
 }

允许＆＃34;允许＆＃34;这样做或者我需要完全不同的东西，例如＆＃34; box-wrapper__list＆＃34;和＆＃34; box-wrapper__item＆＃34;。

感谢您的评论。：）

Answer 1

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

你必须考虑你的基本组件/块（想想＆＃39;构建块＆＃39;）是什么。

组件/块是您可以（理想情况下）放置在布局内的任何位置，并且仍然具有相同的外观/行为，父或相邻元素的关系。 BEM命名约定试图强制执行CSS＆＃34;模块化＆＃34;在这个意义上。

对我来说，你看起来肯定有一个.box组件。如果您认为列表应该是另一个组件/块，那么将其命名为其他名称，因为您将命名块而不是元素。

参考文献：

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树中交叉：https://en.bem.info/forum/43/（来自BEM方法作者的证明）。

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

Answer 4

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

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

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

这确实意味着您必须稍微更改应用类的方式，但我确实发现它有助于封装整个块，而不是必须处理在外面的歧义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方法学：Block之外的元素

4 个答案: