BEM：拥有容器和行的最佳方式？

Question

我对 BEM 中的内容块进行了以下设置：

SCSS

.container {
  width: 960px;
  margin: 0 auto;
}

.row {
  width: 100%;
  float: left;
}

.latest-news__container {
  @extend .container;
}

.latest-news__row {
  @extend .row;
}

编译为：

.container, .latest-news__container {
  width: 960px;
  margin: 0 auto;
}

.row, .latest-news__row {
  width: 100%;
  float: left;
}

我的 HTML

<div class="latest-news">
  <div class="latest-news__container">
    <div class="latest-news__row">
      <div class="latest-news__image"></div>
      <div class="latest-news__content"></div>
    </div>
  </div>
</div>

问题： 将@extend 用于.container 和.row 是否是一个好主意，以便根据块名称保留元素的类名？还是我应该只拥有.container 和.row？然后有另一个@extend 用于其他块等等。

Answer 1

看一下混合概念（当不同的块或元素混合在同一个 DOM 节点上时）：https://en.bem.info/methodology/key-concepts/#mix 和 https://en.bem.info/methodology/css/#mixes

所以你的标记可能看起来像这样（这将使你有可能完全避免@extend）：

<div class="latest-news container">
  <div class="latest-news__item row">
    <div class="latest-news__image"></div>
    <div class="latest-news__content"></div>
  </div>
</div>