Добрый день. Нужен совет по вложенностям в БЭМ.

Форум /

Предположим, у меня есть блок header, в нем есть блок search, который, в свою очередь, содержит кнопку "закрыть". Данная реализация с такой кнопкой предполагается только в хедере и нигде более.

Отсюда вопрос:

Как мне оформлять данную кнопку с точки зрения БЭМ, как элемент блока header или как элемент блока search?
Допустимо ли во вложенном блоке использовать элементы блока родителя?

Заранее, благодарю.

<header class="header">
    <div class="search header__search">
        <form class="search__form" action="/" method="post">

                    <button type="submit" class="search__submit">
                        <i class="icon icon--search"></i>
                        <span>Найти</span>
                    </button>

                    <input class="search__input" placeholder="Поиск товаров" type="text" name="search">

                    <a class="search__extended" href="#">
                        <i class="icon icon--gear--outline"></i>
                        <span>Расширенный поиск</span>
                    </a>

                    <!-- Кнопка ЗАКРЫТЬ -->
                    <button class="header__search-close">
                        <i class="icon--cancel"></i>
                    </button>

                </form>
    </div>
</header>

4 years ago

Realetive

1) Нет однозначного ответа, вам придётся самостоятельно «допросить» эту сущность, чтобы понять, «достойна» ли она выделения в блок. Вообще <form> сам по себе тянет на самостоятельный блок, так что вполне может быть так:

<header class="header">
  <form class="header__search form form_view_search" action="/" method="post">

    <button type="submit" class="form__submit">
      <i class="icon icon--search"></i>
      <span>Найти</span>
    </button>

    <input class="form__input" placeholder="Поиск товаров" type="search" name="search">

    <a class="form__extended" href="#">
      <i class="icon icon--gear--outline"></i>
      <span>Расширенный поиск</span>
    </a>

    <!-- Кнопка ЗАКРЫТЬ -->
    <button class="form__close">
      <i class="icon icon--cancel"></i>
    </button>

  </form>
</header>

2) да.

4 years ago

Zinger1988

Благодарю за ответ!

3 years ago

FominPA

На второй вопрос: Нет, так как это нарушает независимость блока search. Если ваш вопрос, допустимо ли использовать header__elem в блоке search

Чтобы оставлять комментарии, необходимо авторизоваться.