BEM & Sass - 如何处理基本的全局 "style guide" 类型的规则？

Question

我对所有事情都使用 BEM 并欣赏它的优势。

设计师提供了一个基本的全局风格指南，包括

• 页眉 1
• 标题 2
• body文字
• 主按钮
• 辅助按钮

（以及其他一些事情）。

我的直觉是为这些创建 SASS 规则，然后根据需要将它们拉入 BEM 块。

例如，header1 将是：

@mixin header1 {
  font-size: 24px;
  font-family: 'Gotham';
  font-color: '#e3e3e3';
}

那么我的 BEM 块可能是：

pane {
  &__title {
    @include header1;
  }
}

form {
  &__overview {
     @include header1;
  }
}

备选方案是：

1. 重复 header1 内联规则 （重复。符合 BEM 的一切都是扁平模块）
2. 创建一个名为 "header1" 的 BEM 块并在标记中进行 BEM 混合 （ 将始终使用相同的 BEM 元素，因此似乎不是正确的路径）

您对此有何看法？这种做法是否违背了BEM的精神？

Answer 1

我为 header1 使用了占位符

%header1 {
  font-size: 24px;
  font-family: 'Gotham';
  font-color: '#e3e3e3';
}

并将类扩展到这个'abstract'选择器

pane {
  &__title {
    @extend header1;
  }
}

form {
  &__overview {
    @extend header1;
  }
}

Answer 2

您可以为每个级别创建具有不同修饰符的通用 heading 块：heading_level_1、heading_level_2 等。然后 mix 具有所需元素的此类块：<h1 class="pane__title heading heading_level_1"></h1>.

所以现在可以将字体大小等通用内容与 pane__title.

的定位（边距等）等特定内容分开

有关此类方法的更多示例，请参阅：https://en.bem.info/methodology/css/#mixes。