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

【问题标题】：Am I allowed to use element from a parent block, inside a children block?我可以在子块内使用父块中的元素吗？
【发布时间】：2017-09-04 08:52:15
【问题描述】：

我想知道，根据 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__ 前缀开头？

我希望这能解决问题。

【问题讨论】：

块元素是什么意思？像什么？你能提供一个 HTML 示例吗？
具体一些并添加一些代码或鼓舞人心的图像以便更好地理解。
我已经更新了问题，感谢您的反馈。
他们必须以 menu__ 开头，请查看下面的答案，因为它可能会清除您的一些想法。
@Dejan.S 不，他们不必这样做。你能在the docs给我介绍一下吗？

标签： html css bem

【解决方案1】：

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

【讨论】：

第一个例子是正确的，最后一个例子是不正确的，它看起来像是一个被黑命名的元素:)。签出this。
@SergeyDenisov 我不是在元素中创建元素，而是在 head__menu__something 中创建元素，如果您将在主块中，则存在次要“块类型”。所以这是正确的。但正如我在回答中所说，建议是 #1。
这是一个黑客。是的，你的命名是有效的，但是.head__menu-something 元素依赖于.head__menu 元素，这是不正确的。
@SergeyDenisov 它真的不依赖于任何东西，它只是一个命名，让您清楚地了解您的元素属于什么。在现实生活中，您的块将包含超过 3 个 div，假设这 3 个 div 里面都有a，您将如何“正确”命名它们？如果不是由他们自己制作成单独的块。
@SergeyDenisov 完全有道理，这也是我的工作方式。

【解决方案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 格式。但如果你不需要它，我认为没有问题。

【讨论】：

【解决方案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>

【讨论】：