Как правильно написать наименование классов по БЭМ?

Question

[MRcracker]

Здравствуйте.

Есть пример кода.

<div class="menu">
    <div class="menu__links">
        <a class="menu__links-item" href="/">Item 1</a>
        <a class="menu__links-item" href="/">Item 2</a>
    </div>
</div>

Правильно ли тут сделано, что для ссылок указано menu__links-item или правильно было бы для ссылок написать menu__item? Поясните на примере данного куска кода, нужно ли для ссылок указывать называние отталкиваясь от предыдущего блока menu__links или указывая название название нужно отталкиваться от menu.

Answer 1

[Odisseya]

Это скорей вопрос договоренностей. У нас в команде принято использовать двухуровневое БЭМ-дерево — т.е. не привязываться к названию родительского эл-та, так гибче.

Если класс списка и его дочернего эл-та отличаются всего в одну букву (множественное и ед.число) — их легко спутать: .menu__items и .menu__item, поэтому лучше: ul.menu__list > li.menu__item или div.menu__list > a.menu__link и т.п.

Пример:

<div class="menu">
    <div class="menu__list">
        <a class="menu__item" href="/">Item 1</a>
        <a class="menu__item" href="/">Item 2</a>
    </div>
</div>

Answer 2

[Realetive]

Оба примера верные и отражают (в данном случае) лишь ваше восприятие сущностей (блоков и элементов) и их отношение друг к другу. В данном случае БЭМ не накладывает каких-либо ограничений в том, какие именно именные указатели вы используете — главное. чтобы вам и вашим коллегам было понятно.

Answer 3

[tyzberd]

Вы отображаете иерархию в названии элемента, и без разницы, что это menu__links-item а не menu__links__item
https://ru.bem.info/methodology/html/#%D0%92%D0%BB...