Question

我正试图深入研究BEM方法。虽然它似乎是所有项目规模的“必备”方法，但我对它不满意，或者我只是试图以错误的方式使用它？

使用BEM将CSS分成这样的东西。

.block {
  /* Block code goes here */
}

.block--is-hidden {
  /* Block modifier code goes here */
}

.block__element {
  /* Element code goes here */
}

这对我来说似乎很好，只要你不重用一些代码。我们假设我正在使用Bootstrap或任何其他CSS Framework / Library。这样做我只想使用网格。这就是说我的标记可能看起来像那样。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</div>

据BEM说，这是不行的。相反，所有网格类都应该在我们相应的块和元素类中进行包装。实现这一目标的一种可能方法是通过SASS，它是@include。对我来说，这基本上会产生冗余代码。

所以我现在的问题是。我错过了什么吗？我的意思是，使用BEM时，例如将Bootstraps .container代码加载到我自己的每个块样式中只会产生大量输出CSS文件。我的方法是否正确？如果是这样的话 - 我是否真的会为了更好的组织CSS和更好的可读标记而牺牲初始加载时间？

Answer 1

您的block是否必须从容器级别开始？我不确定它是否完全违反BEM方法，但我个人在html＆gt; body＆gt; .container级别“开始”我的block更多。所以：

<html>
<body>

  <div class="container">
    <div class="cheesecake">
      <h1 class="cheesecake__heading"></h1>
    </div>
  </div>

</body>
</html

SCSS看起来像：

.cheesecake {
  &__heading {}
}

等等。

使用BEM方法和较小的文件大小

1 个答案: