For example, there is such a code (by the way, according to BEM, is it correct?):

<div class="article"> <article class="article__item item"> <img src="" alt="" class="item__img"> <div class="item__description"> Some text </div> <a href="" class="item__button button"> <i class="button__icon"></i> <span class="button__text">Some text</span> </a> </article> </div>

scss layout code would look something like this:

 .article { &__item { ... } } .item { &__img { ... } &__description { ... } &__button { ... } } .button { &__icon { ... } &__text { ... } }

According to the ideology of BEM, it is forbidden to create blocks of blocks, i.e. write like this: class="article__item__description" or class="article__item__button" .

Instead, classes are used to move from one block to another, i.e. class="article__item item" .

But what if I need to apply the item class in another place on the page, for example, I would add the following code:

 <ul class="menu"> <li class="menu__item item"> <a href="" class="item__button button"> <i class="button__icon button__icon_social_fb"></i> <span class="button__text">Some text</span> </a> </li> <li class="menu__item item"> <a href="" class="item__button button"> <i class="button__icon button__icon_social_vk"></i> <span class="button__text">Some text</span> </a> </li> <li class="menu__item item"> <a href="" class="item__button button"> <i class="button__icon button__icon_social_ok"></i> <span class="button__text">Some text</span> </a> </li> </ul>

and according to the template, the item and button classes should look different than in the example above, i.e. there is a need to override the classes of these blocks. How does BEM propose to solve this situation?

    2 answers 2

    Modifier. In your case, it can be item_menu and item_article . I think you have an error in that you specify a block and an element at the same time, for example, class="article__item item" . item is a block, article__item is an item.
    I would make item item_article and item item_menu , in item it would be common between item_article and item_menu .

     <div class="article"> <article class="item item_article"> <img src="" alt="" class="item__img"> <div class="item__description"> Some text </div> <a href="" class="button button_item"> <i class="button__icon"></i> <span class="button__text">Some text</span> </a> </article> </div> <ul class="menu"> <li class="item item_menu"> <a href="" class="button button_item"> <i class="button__icon button__icon_social_fb"></i> <span class="button__text">Some text</span> </a> </li> <li class="item item_menu"> <a href="" class="button button_item"> <i class="button__icon button__icon_social_vk"></i> <span class="button__text">Some text</span> </a> </li> <li class="item item_menu"> <a href="" class="button button_item"> <i class="button__icon button__icon_social_ok"></i> <span class="button__text">Some text</span> </a> </li> </ul> .item { &_article { ... } &_menu { ... } &__img { ... } &__description { ... } &__button { ... } } .button { &_item { ... } &__icon { ... } &__text { ... } }

      https://github.com/bem/bem-forum-content-ru/issues/104

       <ul class="menu"> <li class="menu__item"> <a href="" class="menu__button"> <i class="menu__icon menu__icon_social_fb"></i> <span class="menu__text">Some text</span> </a> </li> <li class="menu__item"> <a href="" class="menu__button"> <i class="menu__icon menu__icon_social_vk"></i> <span class="menu__text">Some text</span> </a> </li> <li class="menu__item"> <a href="" class="menu__button"> <i class="menu__icon menu__icon_social_ok"></i> <span class="menu__text">Some text</span> </a> </li> 

       .article { &__item { ... } &__img { ... } &__button { ... } &__icon { ... } &__text { ... } } .menu { &__item { ... } &__icon { &_social_fb { ... } &_social_vk { ... } &_social_ok { ... } } &__button { ... } &__text { ... } }