I am studying fruitfully BEM, and I am confused by the notion of "modifier". The basic BEM documentation from Yandex describes that the modifier can set the appearance, behavior, state, structure of the block, and shows how the modifier can be used using the button as an example, setting the state to disabled . It turns out that if I have a button in which the layout should change the appearance, or even the behavior (: hover,: focus), and also it should be disabled for example :disabled . And let's say after the user fills in all the required fields, the button will need to be turned on, that is, to add another state button_enabled . So I should have a code like:

 <button class="button button_disabled button_enabled button_hover button_focus" type="button">Кнопка</button>

Plus, I may have a block on the site, which should be hidden on the mobile version, it turns out that I need to add the block_hide modifier to all blocks that need to be hidden on the mobile version

 <div class="block block_hide"></div>

As a result, according to BEM, as I understand it is necessary to abandon pseudo-elements and pseudo-classes, and only use classes?

    1 answer 1

    Abandoning pseudo-classes and pseudo-elements is not worth it.

    BEM modifiers are not exactly the right thing, because their priority over the block / element styles is determined only by the order in css . Here is an example:

     *{ box-sizing:border-box; } .btn{ display:inline-block; max-width:100%; padding:0 10px; line-height:2; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-color:#cda; border-radius:4px; color:#fff; text-decoration:none; font-weight:bold; font-family:sans-serif; } .btn_big{ padding:0 20px; /* Пока всё в порядке и модификатор имеет больший вес */ } @media (max-width:900px){ .btn{ padding:0 5px; /* а вот тут начнаются проблемы: padding задаётся для всех .btn, в том числе и для .btn_big */ } } 
     <a href="#" class="btn btn_big">Кнопка</a>

    In my opinion, much better to use the old proven scheme .btn.big . This eliminates the wrapper of classes and provides the best priority modifier. In this case, you need to define the modifier namespace in the project and not use them as block names.

    PS constructive criticism is welcome.

    • Thanks for the reply @ Gennady Zhurov). I looked at how it was implemented in Yandex, and when they hover over the button, apparently through js, the button_hovered_yes modifier is added to the tag, and the styles are added. - Flap Jack
    • @FlapJack, I don’t know. Here is the rule from the Yandex home page .i-ua_browser_desktop .b-errormsg__close:hover, .i-ua_browser_desktop .home-link:link:hover, .i-ua_browser_desktop .home-link:visited:hover { color: #c00!important; } .i-ua_browser_desktop .b-errormsg__close:hover, .i-ua_browser_desktop .home-link:link:hover, .i-ua_browser_desktop .home-link:visited:hover { color: #c00!important; } - zhurof
    • hmmm .. So you shouldn't be soaring with these modifiers, but do everything the old-fashioned way. - Flap Jack
    • one
      If ALL blocks of this class are hidden, then without modifiers. In other cases, the modifier of the type block_mobile-hidden or like bootstrap sm-hidden (without the name of the block, universal) - zhurof
    • one
      The previous statement applies to both a block and an element. Those. if ALL (blocks or elements of this class) is hidden - then without a modifier, otherwise - a modifier. - zhurof