Question

我有一种情况，设计师提出了一个设计，其中有一个主要按钮，有2种颜色组合。

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

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

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

我应该将.button--primary更改为元素（例如button__primary），然后添加两个修饰符，我给出了更早的例子吗？
或者我应该在修饰符（例如.button--primary--midnight，.button--primary--moss）上创建包含修饰符的2个类吗？

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;
}

Answer 2

我认为问题不一定是如何解决OP的问题，因为没有技术障碍，更多的是解决这个问题的合适方法。

首先，本声明中有一种代码味道。

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

因为CSS和JavaScript是紧密耦合的，所以它受到另一个的约束。你的CSS不应该关心JavaScript，反之亦然。如果你需要类作为JavaScript钩子，那么你应该创建单独的类，前缀为js，例如。

js-button--primary

此类不应该用于样式，只能用于JavaScript。

其次，无论你选择在CSS中解决这个问题，要记住的重要原则是：

解决方案是否与整个项目的方法保持一致。
该项目的另一位开发人员是否了解我所做的工作。

只要您选择的方法满足这两个条件，那么它就是一个合适的解决方案。

具有不同颜色组合的主要组合

2 个答案: