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

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 方法的最佳实践：我可以在 menu 块内移动带有 head__user 的元素吗？或者 menu 块中的所有元素都需要以 menu__ 前缀开头？

我希望这能解决问题。

Answer 1

我认为这种变体是允许的：

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

我在the official BEM documentation, but I've found this part中没有找到当前部分：

The block name defines the namespace, which guarantees that the elements are dependent on the block (block__elem).

A block can have a nested structure of elements in the DOM tree:

Example
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>
However, this block structure is always represented as a flat list of elements in the BEM methodology:

Example
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
This allows you to change a block's DOM structure without making changes in the code for each separate element:

Example
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>
    <div class="block__elem3"></div>
</div>
The block's structure changes, but the rules for the elements and their names remain the same.

我的理解是因为 BEM 中元素的 HTML 结构只有一条规则：元素必须在其块内（无论多深）.

对于这种情况，我可以想象的一个可能的问题是使用了某些 BEM tree 格式。但是如果你不需要，我觉得没问题。

Answer 2

我已经使用 BEM 一段时间了，据我所知，不推荐也不打算那样使用它。您可以将不同的 BEM 元素相互嵌套，例如 menu-block 到 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 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>

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

Am I allowed to use element from a parent block, inside a children block?

html

css

bem