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 约定，这是正确的，尽管我会说，您选择的名称{从长远来看，{1}}可能不是很幸运 - 想象一下，你想要包含另一个.btn--margin-top属性设置为btn的修饰符，比方说margin-top。你怎么称呼它？
仅为特定页面包含修饰符的最佳方法是什么？ - 这些CSS类通常不用于特定页面。 BEM 的重点是使您能够编写更多模块化CSS，并考虑到这一点，您应该使用这些CSS类，分别将它们分配给您的Blocks / Elements / Modifiers。这里的诀窍是确定标记中的块/元素/修饰符是什么。你可以实现的是可重复使用的CSS，因此你可以通过添加BEM类来快速应用相同的CSS 考虑阻止或组件，而不是页面。您只想在40px上使用它 - 只需将pageB类添加到btn--margin-top标记。
我应该在pageB或。pageB.scss中包含该修饰符吗？ - 这取决于您如何构建项目，我会说通常，按钮和其他UI元素在大多数情况下是整个网站/ webapp的共同点，因此不需要将它们“附加”到特定页面（如果您想充分利用BEM，我认为您需要放弃这个概念）。此外，无论什么适合你都会对你有好处，除非你不是在开发团队中工作，只要坚持自己的方法，所以你将来会知道在哪里寻找东西。

Answer 2

在生产网站中，我通过使用故意更具体的页面文件解决了这个问题。

另一个回答者是正确的，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的一组颜色之一}）

然后，您的保证金顶部将被简单地定义为您的部分margin-top: 20px;，以限制其对网站所需部分的影响。

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