css - 试图理解 BEM

Question

所以我试图理解 BEM 命名结构。所以假设我有以下 html

<div class="banner">
  <div class="banner__toprow">
    <span class="banner__teamName">
        {{team.name}}
    </span>

    <span class="banner__score">
        {{team.score}}
    </span>
  </div>
  <div class="banner__timeouts">
        {{team.timeOuts}}
    </div>
</div>

现在让我感到困惑的是当你有嵌套的 div 时，它是如何工作的。例如对于 banner__teamName，我通常会做 banner__toprow__teamName。现在也许我可以做到这一点，但这会破坏 BEM 吗？

Answer 1

来自BEM's FAQ

What would be a class name for an element inside another element? .block__el1__el2?

According to BEM method, block structure should be flattened; you do not need to reflect nested DOM structure of the block. So, the class names for this case would be:

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

而 block 的 DOM 表示可能是嵌套的:

<div class='block'>
<div class='block__elem1'>
    <div class='block__elem2'>
        <div class='block__elem3'></div>
    </div>
</div>

除了类看起来更漂亮之外，它还使元素仅依赖于 block 。因此，在对界面进行更改时，您可以轻松地将它们跨 block 移动。 block DOM结构的变化不需要相应的CSS代码变化。

<div class='block'>
<div class='block__elem1'>
    <div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>