G
G
ghioplm2018-04-07 13:38:04
BEM
ghioplm, 2018-04-07 13:38:04

BEM: block element inside another block?

I got confused while understanding BEM. I am designing the site header and I want to make the main navigation inside it, which combines a logo and a list of links (this is quite semantic). And here I am faced with an incomprehensible moment for me. The official documentation says: "Elements do not exist outside of a block. Each element can only belong to one block." For me, the element exists inside the page-header block, but at the same time it is nested in another nav block, that is, formally, it still remains nested in the page-header and has a class with the parent prefix, so the condition is met, but it does not leave me I feel like I don't understand something.
I am aware that I can make the logo a navigation element (nav_logo) or move the logo to a wrapper and then this problem will not arise, but it is the question of understanding that is important here. In general, is it legal at all and do I understand BEM correctly?

<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 the question

In order to leave comments, you need to log in

1 answer(s)
O
Oleg, 2018-04-07
@ghioplm

In general, is it legal at all and do I understand BEM correctly?

Yes, legally, in BEM there are no restrictions on nesting in HTML code. But in this case, it's better to make the logo a nav element, then the nav block can be used anywhere on the site, and not just in the header.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question