试着理解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

在另一个元素中的元素的类名是什么？.block__el1__el2?

根据BEM方法，块结构应该是扁平化的，不需要反映块的嵌套DOM结构。因此，本例的类名为：

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

而块的DOM表示可以是嵌套的：

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

​

除了类看起来更好之外，它还使得元素只依赖于块。因此，在向界面提供更改时，您可以轻松地在整个块之间移动它们。块DOM结构的更改不需要对CSS代码进行相应的更改。

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

​

Answer 2

我建议这样做：

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

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

我不认为有两个修饰符(--)的元素(__)是正确的。我也尽量不在我的类中使用驼峰大小写，这可能是我个人的偏好，但我觉得这可能会导致某些框架的问题，比如Angular。