4

我正在尝试使用 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我应该在or中包含那个修饰符.buttons.scss吗？

4

2 回答 2

4

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

但是，这里有几个问题：

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

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

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

于 2015-10-15T17:23:44.243 回答