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 {}

注意，我也将修饰符类与块类解耦了，这更多是根据BEM规则进行的。您要避免创建依赖于其他类的类。

由于您在帖子中添加了less作为标签，因此可以在以下代码或scss中查看：

.button {
    // button styles

    &--run {
        // modified styles
    }

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

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

Answer 2

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

如果您希望它仅与修饰符run和press一起使用，则应将其命名为

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

希望获得帮助

BEM：将修改器添加到已存在的修改器

2 个答案: