css - 主要有不同的颜色组合

Question

我有这样一种情况，设计师想出了一个设计，其中有一个具有 2 种颜色组合的主按钮。

我正在按照 BEM 的原则编写我的 CSS，但我发现很难为这个按钮命名修饰符。

目前我有一个名为 .button--primary 的修饰符类，它具有两种颜色组合之一，但是第二种颜色组合也应该适用于主按钮。

通常我只会制作两个不同的修饰符(例如 .button--midnight、.button--moss)，但目前有很多附加的 javascript .button--primary 类按钮的功能。

我是否应该将 .button--primary 改为一个元素(例如 button__primary)，然后添加我给出的更早示例的两个修饰符？
或者我应该在修饰符上创建 2 个带有修饰符的类(例如 .button--primary--midnight、.button--primary--moss)？

Answer 1

没有什么可以阻止你使用多个类/修饰符:

<element class="button button--primary button--midnight" />
和
<element class="button button--primary button--moss" />

但这有它的缺点。

首先，您会弄乱您的 html，并降低其可读性。其次，使用两个修饰符，在 CSS 中强调源代码顺序的重要性。 , 因此在此设置中，最后一条规则将始终获胜:

.button {
  color: black; }

.button--primary {
  color: green; }

.button--moss {
  color: yellow;
  font-weight: bold;  } 

.button--midnight {
  color: crimson;
  font-weight: bold;  }

这将迫使您记住这个约束，它本身会造成维护问题。

所以，最好坚持使用多个修饰符的NOT规则，所以在你的情况下你可以这样做:
<element class="button button--primary-midnight" />和 <element class="button button--primary-moss" />
并可能使用 SASS @extend用于在 button--primary 之间共享通用规则和 button--midnight :

//SASS
.button--primary {
  color:white;
  //other rules
} 
.button--primary-midnight {
  @extend .button-primary;
  color:black;
}   

将编译为:

/* CSS */
.button--primary,
.button--primary-midnight {
  color:white;
  /* other rules */
} 
.button--primary-midnight {
  color:black;
}