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

标签 css bem

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

my-item__icon--open--not-red

如您所见,我添加了 --打开 --not-red my-item__icon .
这个可以吗?
有没有更好的方法来实现相同的目标?

最佳答案

在单个元素上可以有多个修饰符,但每个选择器应该只有一个修饰符。不要忘记修饰符只能作为新的选择器添加到现有元素选择器中:<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;}

关于css - 可以在 BEM 中为一个类使用多个修饰符吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59930432/

相关文章:

html - BEM block 、命名和嵌套

css - BEM 类可链接性

html - 弹出窗口问题的 css transform() 中心定位

javascript - 使用 VueJS 和 Vuetify 如何在 v-flex 中垂直和水平居中 v-switch?

html - 如何在主体中设置居中元素而不将主要元素中的所有元素居中?

javascript - 应用适用于 block 中许多元素的状态更改

css - CSS !important 可以加入 BEM 修饰符吗?

html - 我正在编辑 WordPress 导航栏的 CSS,需要帮助更改颜色

css - Bootstrap - 正确对齐

javascript - jQuery 日期选择器显示半天被阻止