我正在尝试深入研究 BEM 方法。尽管它似乎是所有元素规模的“必备”方法，但我对它有点不满意，还是我只是想以错误的方式使用它？
使用 BEM，CSS 被分成这样的东西。
.block {
/* Block code goes here */
}
.block--is-hidden {
/* Block modifier code goes here */
}
.block__element {
/* Element code goes here */
}
这对我来说似乎很好，只要您不重复使用某些代码。假设我正在使用 Bootstrap 或任何其他 CSS 框架/库。这样做我只想使用网格。话虽这么说，我的标记可能看起来像那样。
<div class="container">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
根据 BEM，这是不行的。相反，所有网格类都应该包装在我们相应的 block 和元素类中。实现此目的的一种可能方法是通过 SASS，它是 @include。对我来说，这基本上会导致冗余代码。
所以我现在的问题是。我错过了什么吗？我的意思是，例如，使用 BEM将 Bootstraps .container 代码加载到我自己的每个 block 样式中只会导致大量 输出 CSS 文件。我的方法正确吗？如果是这样——我真的会为了更好组织的 CSS 和更好的可读标记而牺牲初始加载时间吗？
最佳答案
您的 block 是否必须从容器级别开始？我不确定这是否完全违反了 BEM 方法论，但我个人更多地在 html>body>.container 级别“开始”我的 block。所以:
<html>
<body>
<div class="container">
<div class="cheesecake">
<h1 class="cheesecake__heading"></h1>
</div>
</div>
</body>
</html
SCSS 看起来像这样:
.cheesecake {
&__heading {}
}
等等。
关于css - 使用 BEM 方法和较小的文件大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45264652/