BEM：这是编写 BEM 的正确方法吗？

Question

刚开始为一个新项目学习 BEM。有人可以看看我是否使用下面的模板正确理解了 BEM 方法吗？我有点明白，但我觉得它可能会更好。

我的模板

 <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

从 OO 的角度来看，这可能更有意义。

<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