css - 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

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

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

对于您的情况，我建议选择以下名称:

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

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

由于您将 less 作为标签添加到帖子中，下面是在 less 或 scss 中的样子:

.button {
    // button styles

    &--run {
        // modified styles
    }

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

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