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 没有解决这个问题，但解决方案在 css 架构中可用。

我倾向于将项目结构如下：

• 模块
• 部分
• 页

每个都变得更具体。

一个部分可能有一些特定的方式来呈现一个按钮，在这种情况下，sass 会是这样的：

.section {
  .button--primary {
    // styles 
  }
}

对于页面，相同，但具有页面特定键：

.page {
  .button--primary {
    // styles 
  }
}

你甚至可以这样做：

.page {
  .section {
    .button--primary {
      // styles 
    }
  }
}

关键是保持 sass 文件结构的特殊性。您的按钮文件不会更改，您可以确保将其放在站点 HTML 中的任何位置并使其正确呈现，并且作为一个模块，它应该只包含您希望在站点范围内应用的样式。例如：

.button--call-to-action {
  background-color: $brand-colours__call-to-action;
}

（连字符表示call-to-action 是button 的变体，下划线表示call-to-action 是属于brand-colours 的一组颜色之一）

然后，您的边距顶部将在您的部分 sass 中简单地定义为 margin-top: 20px;，从而将其效果限制在网站的所需部分。

顺便说一句，通常会发现特定页面文件中的几乎所有内容都可以在链上进一步重构为部分和模块的变体，这意味着它们通常最终是空的。

Answer 2

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

但是，这里有几个问题：

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