2

所以我试图理解 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 吗？

4

2 回答 2

4

来自BEM 的常见问题

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

根据边界元法，块结构应该是扁平的；您不需要反映块的嵌套 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>

于 2018-09-09T23:36:31.313 回答
-1

我建议这样做：

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

于 2018-09-09T22:55:25.010 回答