What is the use of using a BEM modifier?

Question

I am having trouble understanding the benefits of using the BEM naming convention -modifier css. Can someone tell me why this is:

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

better than that?

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

The markup is clearly more bloated when using the BEM modifier.

Answer 1

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

<div class="menu__item button active"> <div class="menu__item button button--active"> , , BEM, , .button , , .menu__item.

os.

Answer 2

, , BEM. , , . , CMS . , , , CSS. , .

, , .my-element.checked, .this-box.checked, .section .my-element.checked . . BEM .my-element.checked ( 20), .my-element--checked ( 10). , , - !important.

, , .

checked (, , ). , <input type="checkbox" checked> . , - :

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

Answer 3

- , BEM , , ( ) .checked , , . .active .disabled, --modifier , , , .active .active.tab .

The main promise of BEM is that if you follow all these conventions, you will have stylized components without side effects. Although it is possible to code without side effects, for the whole team it is very difficult to do. But yes, if you do not like it, use what you like. If your project is small enough or young enough, you may not need to worry that conflicting rules have not yet been reworked.