BEM - 在哪里包含特定页面的修饰符？

Question

我正在尝试使用 BEM 命名约定，但在决定在哪里包含特定页面的修饰符时遇到了一些困难。

例如，假设我有一个橙色按钮：

<button class="btn btn-orange">Button A</button>

我的项目有 3 个不同的页面：

 - pageA.html - pageA.scss
 - pageB.html - pageB.scss
 - pageC.html - pageC.scss

pageB.html按钮上应该有一个margin-top:30px. 这样写修饰符是否正确：

.btn {
  padding: 5px 20px;
  background: orange;
  margin: 0

  &--margin-top {
    margin-top: 30px;
  }
}

仅为特定页面包含这样的修饰符的最佳方法是什么？在这种情况下，这将是为pageB.html. 我应该在pageB.scssor中包含该修饰符.buttons.scss吗？

Answer 1

我认为您在这里混淆了两个概念 - BEM，这是命名约定与构建项目的问题。两者彼此无关，而且我认为 BEM 在构建 SASS 文件方面并没有固执己见。

但是，您在这里问几个问题：

1. 这样写修饰符是否正确？- 如果你想坚持BEM.btn--margin-top约定，这是正确的，尽管我想说，从长远来看，你选择的名称可能不是很幸运 - 想象一下，你会想要包含另一个属性设置btn为的修饰符margin-top，比方说40px。你将如何命名它？
2. 仅针对特定页面包含类似修饰符的最佳方法是什么？- 这些 CSS 类通常不是为特定页面制作的。BEM的全部目的是让您能够编写更模块化的 CSS，考虑到这一点，您应该使用这些 CSS 类，通过将它们分别分配给您的块/元素/修饰符。这里的技巧是确定标记中的块/元素/修饰符是什么。您将由此获得可重用的 CSS，因此您可以通过添加 BEM 类来快速应用相同的 css。从块或组件
   的角度思考，而不是页面。您只想使用它- 只需将类添加到您的标记中即可。pageBbtn--margin-toppageB
3. 我应该在 or 中包含该修饰符吗pageB.scss？buttons.scss？- 这取决于你如何构建你的项目，我想说的是，通常，按钮和其他 UI 元素在大多数情况下对于整个网站/网络应用程序来说是通用的，所以不需要将它们“附加”到特定页面（其中如果你想充分利用 BEM，我认为你需要放弃这个概念）。此外，任何适合你的都会对你有好处，除非你不是在开发团队中工作，否则就坚持你自己的方法，这样你将来就会知道在哪里寻找东西。