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 那样命名最后一个元素是不正确的。但是我只需要将 "pressed" 样式添加到 "run" 按钮，而不是通过编写 class 像 button_pressed 和混合修饰符 button button_run button_pressed.[=18= 来为所有按钮添加样式]

我应该如何重构我的代码以符合 BEM 约定？

Answer 1

首先，名字应该是.block--modifier或.button--run

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

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

希望对您有所帮助

Answer 2

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

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

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

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

注意，我还将修饰符 classes 从块 class 中分离出来，这更符合 BEM 规则。您希望避免创建依赖他人工作的 classes。

由于您将 less 作为标签添加到 post，因此在 less 或 scss 中的外观如下：

.button {
    // button styles

    &--run {
        // modified styles
    }

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

这将导致 class我上面写的名字

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

BEM: adding modifier to already existed modifier

css

less

bem