BEM：将修饰符添加到已存在的修饰符

Question

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

.button {
    // styles for button
}

及其具有更具体样式的修饰符：

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

有一刻我意识到我需要button_run 的修饰符，让我们将其命名为button_run_pressed：

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

问题在于，根据 BEM 约定，像我在上面 button_run_pressed 所做的那样命名最后一个元素是不正确的。但我只需要为“运行”按钮添加“按下”样式，而不是通过编写 button_pressed 之类的类和混合修饰符 button button_run button_pressed 来添加所有按钮。

我应该如何重构我的代码以匹配 BEM 约定？

Answer 1

首先，名称应为.block--modifier 或.button--run

如果您希望它仅适用于修饰符 run 和 press，则应将其命名为

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

希望有帮助

Answer 2

根据http://getbem.com/naming/，修饰符类以两个连字符 (--) 开头。所以.button 的修饰符应该是这样的

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

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

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

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

由于您在帖子中添加了less 作为标签，这就是它在less 或scss 中的外观：

.button {
    // button styles

    &--run {
        // modified styles
    }

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

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