What benefit does using BEM --modifier bring?

Question

I'm having trouble understanding advantage of using BEM --modifier css naming convention. Can someone tell me why is this:

.my-element--checked {
    color: green;
}

better than this?

.my-element.checked {
    color: green;
}

Markup is clearly more bloated when using BEM --modifier.

Answer 1

To pick up on Lawrence's comment, if you are working on a small site, you don't need full-on BEM naming. However, when working on large enterprise solutions, it helps to keep components discreet and self-contained. For example, I'm working on a large CMS with 4 other developers. Because we are all building separate components which can be authored in countless combinations, each needs to be contained to avoid CSS collisions. If we relied just on chained or contextual selector, we run into specificity issues very quickly.

Following your example, you risk ending up with selectors like .my-element.checked, .this-box.checked, .section .my-element.checked and on and on. You get a lot of bloat and a lot of specificity. By using BEM, instead of .my-element.checked (specificity of 20), you can just use .my-element--checked (specificity of 10). This makes your code more modular and portable and eases the escalation of specificity -- which usually ends with someone getting frustrated and tossing in !important.

That isn't to say that you should never use contextual selectors, just keep in mind the scope of the project and potential downfalls of both systems.

For your specific example, you might want to look at using the checked attribute instead (or in addition if needed). If this is a form field, then <input type="checkbox" checked> might actually be better. The attribute will help screen readers out and you can still style based on it:

input[type="checkbox"]:checked {color: green}

Answer 2

According to this documentation, it's not only about CSS performance. When using BEM, the same DOM node can represent many blocks and elements at the same time. This way, you could have something like <div class="menu__item button">.

The difference between <div class="menu__item button active"> and <div class="menu__item button button--active"> is that, on the second example, that uses BEM convention, you are able to specify that the .button block is the one that is being modified, and not the .menu__item element.

Depending on the project, this kind os specification may be required.

Answer 3

The reason modifier classes work less well than the BEM style in all cases is that in real world cases (which can have more complex components within components), .checked in this case can apply to any class on that element or any class below that element in ways that aren't always predictable, especially when using the same component in different places in our UI. We tend to use similar words to mean .active or .disabled and the --modifier allows us to know, not hope, know, that an .active button will not shared styles with an .active .tab or some such.

BEMs basic promise is, if you follow all of these conventions, you will have styled components with no side-effects. While it's possible to code without side-effects, it's very hard for a whole team to do so. But yeah, if you don't like it, use what you like. If your project is small enough or young enough you might not need to worry about clashing rules render paint reflows yet.