Question

我想知道，根据BEM方法，我是否可以拥有以下结构：

.block1
  .block1__element1
    .block2
       .block1__element2 <-- ??

我是否可以在子块中使用父块中的元素？

感谢。

更新

这是实际的DOM结构：

<div class="head">
  <div class="head__user"></div>
  <div class="head__nav">
    <div class="menu">
       // <-- ???
    </div>
  </div>
</div>

根据BEM方法的最佳实践：我是否允许在head__user区块内移动menu元素？或者menu块中的所有元素都需要以menu__前缀？

开头

我希望这能解决问题。

Answer 1

我一直在使用BEM，从我得到它不建议也不打算这样使用。您可以将menu-block之类的不同BEM元素嵌套到head-block中，但menu-block项不应超出其父menu-block，就像您不应该放置menu-block__item一样在head-block的顶部。这有道理吗？：）

为了说明有两种方法。这里应该注意的是，取决于项目的规模和构建方式（基于组件？）。如果您没有大型项目，并且没有执行或重复使用菜单，那么您可以双向完成。让我们说你的菜单是大量的html / css我会像＃1

那样做

这不正确

<div class="head">
  <div class="head__user"></div>
  <div class="head__nav">

    <div class="menu">
       <div class="head__something"></div>
    </div>

  </div>
</div>

推荐的解决方案
基于this part of the documentation。现在你可以将自己的标题设计切成块，下面是否匹配？

<div class="head">
  <div class="head__user"></div>
  <div class="head__nav">
    <div class="menu">
       <div class="menu__something"><img src="" class="menu__image" /></div>
    </div>
  </div>
</div>

Answer 2

我认为允许这种变体：

<div class="head">
  <div class="head__nav">
    <div class="menu">
       <div class="head__user"></div>
    </div>
  </div>
</div>

我还没有找到the official BEM documentation中的当前部分，但我找到this part：

块名称定义命名空间，guarantees that the个元素依赖于块（block__elem）。

块可以在DOM树中具有嵌套的元素结构：

实施例
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>
但是，此块结构始终表示为BEM方法中的元素的平面列表：

实施例
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
这允许您更改块的DOM结构，而无需更改每个单独元素的代码：

实施例
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>
    <div class="block__elem3"></div>
</div>
块的结构发生了变化，但元素及其名称的规则保持不变。

我理解这一点，因为BEM中只有一个关于元素的HTML结构的规则：元素必须在其块内（无论多深）。

我可以想象的一个可能的问题是使用一些BEM tree格式。但如果你不需要它，我认为没有问题。

Answer 3

我会考虑将潜在head__something简化为something，然后对其进行多次修改。例如something--head和something--menu。

<div class="head">
  <div class="head__user"></div>
  <div class="head__nav">
    <div class="menu">
     <div class="something--menu" />
    </div>
  </div>
  <div class="something--head" />
</div>

另外，进一步重构，我会考虑删除head__nav，因为它可能不会添加比menu更丰富的语义。

<div class="head">
  <div class="head__user"></div>
  <div class="menu">
    <div class="something--menu" />
  </div>
  <div class="something--head">for those cases where you want <code>something</code> directly descending from <code>head</code></div>
</div>

我是否允许在子块内使用父块中的元素？

3 个答案: