БЭМ: Это правильный способ написать БЭМ?

Question

Просто начал склоняться о БЭМ для нового проекта. Может кто-нибудь посмотреть, правильно ли я понял методологию БЭМ с моим шаблоном ниже? Я как бы понимаю, но чувствую, что может быть и лучше.

Мой шаблон

 <div id="wrapper" class="content">
  <header>
    <div class="site-logo">
      <img src="path/to/logo.png" class="site-logo__main">
    </div>
    <div class="site-navigation">
      <nav class="main-menu">
        <ul class="list">
          <li class="list-item">
            <a href="" class="main-menu__active">Nav link</a>
          </li>
          <li class="list-item">
            <a href="">Nav link</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="header-avatar">
         <img src="path/to/logo.png" class="header-avatar__main">
    </div>
  </header>
  <main>
    <aside class="user-details">
      <ul class="list">
        <li class="list-item">
          <a href="" class="user-details__active">Nav link</a>
        </li>
        <li class="list-item">
          <a href="">Nav link</a>
        </li>
        </ul>
      <div class="sidebar-avatar">
        <img src="path/to/logo.png" class="user-details-avatar">
      </div>
    </aside>
    <section class="contact-us">
      <div class="container">
        <div class="row">
          <div class="contact-details">xxx</div>
          <div class="contact-image"></div>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <div class="footer-avatar">xxx</div>
    <div class="copyright">xxx</div>
    <div class="footer-links">
                    <ul class="list">
          <li class="list-item">
            <a href="">Nav link</a>
          </li>
          <li class="list-item">
            <a href="">Nav link</a>
          </li>
        </ul>
    </div>
  </footer>
</div>

Answer 1

Это, вероятно, будет иметь больше смысла с точки зрения ОО.

<div id="wrapper">
    <header class="header">
        <div class="header__site-logo">
            <img src="path/to/logo.png">
        </div>
        <div class="header__site-navigation">
            <nav class="main-menu">
                <ul class="main-menu__list list">
                    <li class="list-item">
                        <a href="" class="main-menu__link active">Nav link</a>
                    </li>
                    <li class="list-item">
                        <a href="" class="main-menu__link">Nav link</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="header__avatar">
             <img src="path/to/logo.png">
        </div>
    </header>
    <main id="content">
        <aside class="user-details">
            <ul class="user-details__list list">
                <li class="list-item">
                    <a href="" class="user-details__link active">Nav link</a>
                </li>
                <li class="list-item">
                    <a href="" class="user-details__link">Nav link</a>
                </li>
                </ul>
            <div class="user-details__avatar">
                <img src="path/to/logo.png">
            </div>
        </aside>
        <section class="contact-us">
            <div class="container">
                <div class="row">
                    <div class="contact-us__details">xxx</div>
                    <div class="contact-us__image"></div>
                </div>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="footer__avatar">xxx</div>
        <div class="footer__copyright">xxx</div>
        <div class="footer__links">
            <ul class="footer__list list">
                <li class="list-item">
                    <a href="" class="footer__link">Nav link</a>
                </li>
                <li class="list-item">
                    <a href="" class="footer__link">Nav link</a>
                </li>
            </ul>
        </div>
    </footer>
</div>

Попробуйте представить свой DOM как набор высокоуровневых компонентов:

wrapper div
  > header
    > main-menu
  > content
    > user-details
    > contact-us
  > footer

Используйте их в качестве "блоков", что означает, что они идут перед двойным подчеркиванием в именах классов.

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

header
  > header__site-logo
  > header__site-navigation
  > header__avatar