Css BEM：向已存在的修改器添加修改器

当我使用BEM时，我被简单的场景弄糊涂了。 示例中有一个基本按钮：

.button {
    // styles for button
}

及其具有更具体样式的修改器：

.button.button_run {
    // additional styles for this type of button
    // i.e. custom width and height
}

有一刻我意识到我需要修改

按钮运行

，让我们把它命名为

按钮运行

：

.button_run_pressed {
    // more styles, i.e. darker background color
}

问题是，根据BEM惯例，我在上面所做的命名最后一个元素是不正确的

button\u run\u pressed

。但我只需要将“按下”样式添加到“运行”按钮，而不是通过编写类，如

button\u pressed

和mixed修饰符

button-button\u run-button\u pressed

来为所有按钮添加样式

---

如何重构代码以匹配BEM约定？

首先，名称应为

.block--modifier

或

.button--run

如果您希望它只与修改器

运行

和

按

一起工作，则应将其命名为

.button.button--run.button--pressed

希望此帮助

根据，修饰符类以两个连字符（-）开头。因此，

.button

的修饰符应该如下所示

.button--modifier { /* ... */ }

在您的情况下，我建议选择以下名称：

.button {}
.button--run {}
.button--run-pressed {}

请注意，我还将修改器类与块类解耦，这更符合BEM规则。您希望避免创建依赖他人工作的类

由于您在帖子中添加了

less

作为标记，下面是如何在less或scs中显示的：

.button {
    // button styles

    &--run {
        // modified styles
    }

    &--run-pressed {
        // more modifiers
    }
}

---

这将导致我在上面写的类名

Khm…为什么有必要用双hypens命名修饰符？正如我在BEM官方网站（）上看到的，他们使用单下划线作为修饰语？哦，真的，有不同的名称样式。好的，很清楚：）好的，谢谢。这样的区别是有道理的。我考虑过这个方法……但你们可能知道为什么修饰符应该和双连字符一起使用吗？当我回答@Nguyen Phong Thien的问题时，我看到了另一条“规则”。它可能过时了吗？它只是一个不同的命名约定，真的，没有别的。边界元法只是一个概念，而不是关于如何命名类的绝对规则。因此，我只能推测为什么你会发现双连字符版本。也许可读性更好？只需查看下划线和连字符，就可以轻松区分

块

、

块元素

、

块--修饰符

和

块元素--修饰符

。