BEM: adding modifier to already existed modifier

Question

I'd been confused by simple scenario when I was working with BEM. There is a base button in example:

.button {
    // styles for button
}

and its modifier with more specific styles:

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

One moment I realize that I need modifier for button_run, let's name it like button_run_pressed:

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

The problem is that it's not correct to name the last element as I did above button_run_pressed according to BEM conventions. But I need to add "pressed" styles only to "run" button, not for all buttons by writing class like button_pressed and mixing modifier button button_run button_pressed.

How should I refactor my code to match BEM conventions?

Answer 1

According to http://getbem.com/naming/, the modifier classes are initiated with two hyphens (--). So a modifier for .button should look like

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

In your case, I would suggest choosing the following names:

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

Notice, that I also decoupled the modifier classes from the block class, which is more according to BEM rules. You want to avoid creating classes which depend on others to work.

Since you added less as a tag to the post, here's how this could look in less or scss:

.button {
    // button styles

    &--run {
        // modified styles
    }

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

This would result in the classnames I wrote above