2

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

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

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

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

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

4

2 回答 2

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

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

因此，最好坚持不使用多个修饰符的规则，因此在您的情况下，您可以这样做：
<element class="button button--primary-midnight" />并且<element class="button button--primary-moss" />
可能用于在andSASS @extend之间共享通用规则 ： button--primarybutton--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;
}
于 2015-10-19T13:11:49.680 回答
0

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

首先，此语句中有一种代码味道。

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

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

js-button--primary

这个类永远不应该用于样式，而只能用于 JavaScript。

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

  1. 是与整个项目的方法保持一致的解决方案。
  2. 该项目的另一位开发人员是否会理解我所做的事情。

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

于 2015-10-20T16:43:28.310 回答