BEM: Is this the proper way to write BEM?

Question

Just started leaning about BEM for a new project. Can someone please see if I have understood the BEM methodology correctly with my template below? I kind of get it but I feel it could be better.

My template

 <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

This would probably make more sense from an OO point of view.

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

Try to imagine your DOM as a set of high-level components:

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

Use those as your "blocks", which means they go before the double underscores in your class names.

For every component that each of these blocks have, append a friendly name to that component and use it as a class name.

header
  > header__site-logo
  > header__site-navigation
  > header__avatar