BEM 中的类可以使用多个修饰符吗？答案

【问题标题】：Is it OK to use multiple modifiers for a class in BEM?BEM 中的类可以使用多个修饰符吗？
【发布时间】：2020-05-12 18:53:31
【问题描述】：

是否可以像这样在 BEM 中为一个元素添加多个修饰符：

my-item__icon--open--not-red

如您所见，我在 my-item__icon 中添加了 --open 和 --not-red。这个可以吗？有没有更好的方法来达到同样的效果？

【问题讨论】：

这是主观的，因为 BEM 主要是一种风格指南。我个人认为多个修饰符没有问题。
BEM 这不是刻在石头上的法律，但我个人会将这个修饰符解耦为my-item__icon--open 和my-item__icon--not-red，我会同时应用两者。只是品味和背景的问题。
修饰符不应该应用于像my-item--open这样的块。不是问题中的元素。
@Batu.Khan，在我的例子中，两个修饰符被添加到同一个块中。

标签： css bem

【解决方案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;}

【讨论】：

如果每个修饰符的多个类困扰您，我构建了一个 Sass 库，允许 OP 使用它们的初始单个类：github.com/One-Nexus/Cell/wiki