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

看一下mixes概念（当不同的块或元素混合在同一个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>

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

1 个答案: