БЭМ: элемент блока внутри другого блока?

Question

[ghioplm]

Запутался, разбираясь в БЭМ. Я верстаю header сайта и мне хочется сделать внутри него основную навигацию, которая объединяет в себе логотип и список ссылок (это вполне семантично). И тут я сталкиваюсь с непонятным для меня моментом. Официальная документация гласит: "Элементы не существуют вне блока. Каждый элемент может принадлежать только одному блоку". У меня же элемент существует внутри блока page-header, но при этом он вложен в другой блок nav, то есть, формально он ведь все равно остается вложенным в page-header и имеет класс с префиксом родителя, поэтому условие соблюдено, но меня не покидает ощущение, что я чего - то не понимаю.

Я осознаю, что я могу сделать логотип элементом навигации (nav__logo) или перенести логотип в обертку и тогда такой проблемы не возникнет, но тут важен именно вопрос понимания. В общем, законно ли это вообще и правильно ли я понимаю БЭМ?

<header class="page-header">
      <div class="page-header__wrapper">
        <nav class="nav">
          <a class="page-header__logo">
            <img src="img/logo.svg" width="254" height="64" alt="">
          </a>
         </nav>
       </div>
</header>

Answer 1

[Олег]

В общем, законно ли это вообще и правильно ли я понимаю БЭМ?

Да законно, в БЭМ нет ограничений во вложенности в HTML коде. Но в данном случае лучше сделать logo элементом nav, тогда блок nav можно будет использовать где угодно на сайте, а не только в шапке.

Comments

[ghioplm]

Благодарю за ответ. Раз нет никак ограничений, то из этого следует, что рекурсивная вложенность блоков и элементов тоже допустима? (Меню и подменю, etc)

[Олег]

ghioplm, вложенность может быть любая, но по возможности необходимо избегать зависимостей и сложной структуры, потому что это затруднит переиспользование кода.