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

Question

我正在使用BEM的一切，并欣赏其优势。

设计者提供了一个基本的全局样式指南，包括

• Header1
• Header2
正文
<
• 主要按钮/gh><
• 二级按钮/gh>

(和其他一些东西)。

我的直觉是为这些创建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 inline重复上述规则(重复。)
2. 创建一个名为"header1"的BEM块，并在标记中进行BEM混合(总是使用相同的BEM元素，所以似乎不是正确的路径)

你的方法是什么?这种做法是否违背了边界元理论的精神?

Answer 1

您可以为每个级别创建具有不同修饰符的通用heading块:heading_level_1, heading_level_2等。然后将这些块与所需元素混合:<h1 class="pane__title heading heading_level_1"></h1>。

所以现在可以把通用的东西，比如字体大小，和特定的东西，比如pane__title的定位(边距等)分开。

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

Answer 2

我为header1使用了一个占位符

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

并将类扩展到这个"抽象"选择器

pane {
  &__title {
    @extend header1;
  }
}
form {
  &__overview {
    @extend header1;
  }
}