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）出现问题。

试图了解BEM

2 个答案: