css - 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.scss 中包含那个修饰符吗？或 .buttons.scss ?

Answer 1

我认为您在这里混淆了两个概念 - BEM ，即 命名约定 与构建元素的问题。两者都没有任何关系，我认为 BEM 在构建您的 SASS 文件方面并不固执己见。

但是，这里有几个问题:

这样写修饰符是否正确？ - 如果你想坚持 是正确的BEM 约定，虽然我会说，你选择的名字.btn--margin-top从长远来看可能不是很幸运 - 想象一下，你会想要包含另一个 btn带有 margin-top 的修饰符属性设置为，假设 40px .你将如何命名它？

仅针对特定页面包含这样的修饰符的最佳方法是什么？ - 您通常不会为特定页面制作这些 CSS 类。 的整点BEM 是为了使您能够编写更多模块化的 CSS，并牢记这一点，您应该使用这些 CSS 类，将它们分别分配给您的 block /元素/修改器。这里的技巧是确定标记中的 block /元素/修饰符是什么。您将实现的是可重用的 CSS，因此您可以通过添加 BEM 类快速应用相同的 css。
考虑 block 或 组件 ，而不是页面。您只想在 pageB 上使用它- 只需添加 btn--margin-top向您的 pageB 上课标记。

我应该在 pageB.scss 中包含那个修饰符吗？或者 。 buttons.scss ? - 这取决于您如何构建元素，我会说通常，按钮和其他 UI 元素在大多数情况下对整个网站/webapp 来说都是通用的，因此不需要将它们“附加”到特定页面(其中如果你想充分利用 BEM，我认为你需要放弃这个概念)。此外，任何适合你的东西都会对你有好处，除非你不是在一个开发团队中工作，否则只要坚持你自己的方法，这样你以后就会知道去哪里找东西。