可以在 BEM 中为一个类使用多个修饰符吗？

Question

是否可以像这样向 BEM 中的元素添加多个修饰符：

my-item__icon--open--not-red

正如你可以看到我添加--open和--not红到我-item__icon。这个可以吗？有没有更好的方法来实现相同的目标？

Answer 1

单个元素上可以有多个修饰符，但每个选择器只能有一个修饰符。不要忘记修饰符只能作为新选择器添加到现有元素选择器中：<div class="my-item__icon my-item__icon--open my-item__icon--not-red">。来源/示例：https://en.bem.info/methodology/naming-convention/#element-modifier-name

然后你可能想一一设置它们的样式：

.my-item__icon {display: none;}
.my-item__icon--open {display: inline;}
.my-item__icon--not-red {color: blue;}