Как обратиться к элементу элемента в бэме?

Question

[vvanyazz]

допустим у меня есть элемент header__list, как назвать элемент именно header__list-а, как я знаю header__list-item означает элемент элемента и так делать не надо, возможно надо этот элемент сделать блоком, типо: list-headet или как?

Answer 1

[Виталий Першин]

возможно надо этот элемент сделать блоком, типо: list-headet или как?

Да, блоком, но не надо приплетать header. Блок должен называться таким образом, что-бы было понятно что он делает, а не где он расположен. А в последствии можно смиксовать блок, например:

<div class="header">
    <h1 class="header__title">Title</h1>
    <p class="header__desc">Description</p>
    <ul class="header__list list">
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
    </ul>
  </div>

Comments

[vvanyazz]

я тоже так думал, но лист используется очень часто и как поступить если в разных секциях мне нужен класс list?

[Виталий Першин]

vvanyazz,
Чтобы правильно ответить на этот вопрос нужно знать контекст проблемы.

Если этот список нигде кроме блока не будет повторяться, то можно просто давать имена по бэм дальше:

<div class="header">
    <h1 class="header__title">Title</h1>
    <p class="header__desc">Description</p>
    <ul class="header__list">
      <li class="header__item"><a href="#" class="header__link">link</a></li>
      <li class="header__item"><a href="#" class="header__link">link</a></li>
      <li class="header__item"><a href="#" class="header__link">link</a></li>
    </ul>
  </div>

Есть любители таких извращений:

<div class="header">
    <h1 class="header__title">Title</h1>
    <p class="header__desc">Description</p>
    <ul class="header__list">
      <li class="header__list-item"><a href="#" class="header__list-link">link</a></li>
      <li class="header__list-item"><a href="#" class="header__list-link">link</a></li>
      <li class="header__list-item"><a href="#" class="header__list-link">link</a></li>
    </ul>
  </div>

Но это уже псевдоБЭМ, обратите внимание как мы неявно привязались к элементу header__list и как бы наследуем наименование от него header__list-item, header__list-link. В таких случаях очевидно что нужно делать его отдельным блоком.

Вариантов именования списков достаточно много, начиная от того что делает список, например:
benefits, features, advantages, links и т.д..

Если эти имена заняты, то можно использовать словосочетания:
benefits-list, features-list, advantages-list, links-list

Если вы совсем не можете определится с названием, вы можете использовать префиксы:
h-list, u-list, f-list и т.д..

[vvanyazz]

Виталий Першин, познавательно, спасибо!

[kryamk]

Виталий Першин, а тут вот совсем не против такого

<!--
    Неверно. Структура полного имени элементов не соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form class="search-form">
    <div class="search-form__content">
        <!--
            Рекомендуется:
            `search-form__input` или `search-form__content-input`
        -->
        <input class="search-form__content__input">

        <!--
            Рекомендуется:
            `search-form__button` или `search-form__content-button`
        -->
        <button class="search-form__content__button">Найти</button>
    </div>
</form>

[Виталий Першин]

kryamk, Какого? Там написано "Неверно."

Если вы про название search-form то оно вполне логично и означает "форма поиска" или "поисковая форма" и не привязывается ни к какому месту.

Если вы про search-form__content-input, то все же search-form__input первым написали, а дальше уже просто выкручиваются как могут. Проблема в том что так писать можно (это же элемент и двойное подчеркивание один раз, так по сути что угодно можно написать), но как я выше объяснил у вас начинается привязка к контексту и если это будет 1-2 элемента в принципе терпимо, но если это целый список с внутренними ссылками и прочими мелочами это уже боль.