试图理解 BEM答案

【问题标题】：Trying to Understand BEM试图理解 BEM
【发布时间】：2018-09-09 22:49:03
【问题描述】：

所以我想了解 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 吗？

【问题讨论】：

标签： css bem

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

【讨论】：

【解决方案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）出现问题。

【讨论】：