css - BEM 元素和块在同一个 DOM 节点上

Question

如下例所示，在同一个 DOM 节点上使用元素和块类名是否正确？

<div class="b-panel">
   <div class="b-panel__head"></div>
   <div class="b-panel__body"></div>

   <!-- b-nav is an individual block but also element of b-panel -->

   <div class="b-nav b-panel__nav">
      <a href="#" class="b-nav__prev">Prev</a>
      <span class="b-nav__label">Label</span>
      <a href="#" class="b-nav__next">Next</a>
   </div>

</div>

谢谢。

Answer 1

是的，它是混合的：

您还可以使用块的 BEMHTML 模板将元素与块混合。让我们指定商品块中的每个项目元素具有与头块相同的格式。为此，您需要将商品块中的每个项目与 j 库中的盒子块混合。[来源：来自 bem.info 的教程]

在您的代码中：

<div class="b-panel">
   <div class="b-nav b-panel__nav"></div>
</div>

内部 DOM 元素是块b-nav和元素的混合b-panel__nav。