我是否正确遵循 BEM 方法？

Question

<footer id="colophon" class="site-footer">
        <div class="site-footer__form-container widget-area">
            <div id="footer-sidebar1">
                <?php if(is_active_sidebar('footer-sidebar-1')){
                            dynamic_sidebar('footer-sidebar-1');
                        }
                ?>
            </div>
        </div>
        <div class="site-footer__nav-container">

                <div class="site-footer__events">
                    <h3 class="site-footer__title">Events</h3>
                    <ul class="site-footer__nav-list">
                        <li class="site-footer__list-item">
                            <a href="./special-events" class="site-footer__link">Parade Of Lights</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./special-events" class="site-footer__link">SeaFair</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./special-events" class="site-footer__link">Burials At Sea</a>
                        </li>
                    </ul>
                </div>
                <div class="site-footer__about">
                    <h3 class="site-footer__title">About us</h3>
                    <ul class="site-footer__nav-list">
                        <li class="site-footer__list-item">
                            <a href="./owners" class="site-footer__link">Owners</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./blog" class="site-footer__link">Blog</a>
                        </li>
                    </ul>

                </div>
                <div class="site-footer__contact">
                    <h3 class="site-footer__title">Weddings</h3>
                    <ul class="site-footer__nav-list">
                        <li class="site-footer__list-item">
                            <a href="./wedding-info" class="site-footer__link">Wedding Info</a>
                        </li>
                        <li class="site-footer__list-item">
                            <a href="./wedding-menus" class="site-footer__link">Wedding Menus</a>
                        </li>
                    </ul>
                </div>

        </div>
        <div class="site-footer__contact-container">
            <p class="site-footer__phone">(206) 123-4567</p>
            <p class="site-footer__address">
                <a href="#" class="site-footer__link">1234 Water St. Seattle, WA 98107</a>
            </p>
            <div class="site-footer__icons-container">
                <div class="site-footer__facebook"></div>
                <div class="site-footer__instagram"></div>
                <div class="site-footer__twitter"></div>
            </div>
        </div>
        <div class="site-footer__copyright-container">
            <p class="site-footer__copywrite">Copyright © 2017 Friendship Charters. All Rights Reserved.</p>
        </div>
    </footer>

我正在尝试为网站的页脚编写 HTML，我想知道我是否正确遵循 BEM 方法/样式指南。这让我很困惑。我永远不确定我是否应该创建更多的“块”。这是正确的吗？感谢您的任何见解。

Answer 1

您的代码适用于 BEM 语法。但是单片，太语义化，没有什么是可重用的。我建议使用以下块层次结构：

• 网站页脚
  • 小部件区域
  • 多列
    • 标题列表（事件）
    • 标题列表（关于）
    • 标题列表（联系人）
  • 联系箱
    • 图标（脸书）
    • 图标（instagram）
    • 图标（推特）

HTML 代码：

<footer id="colophon" class="site-footer">
    <div class="site-footer__form-container widget-area">
        ...
    </div>
    <div class="site-footer__nav-container multi-columns">
            <div class="multi-columns__col titled-list">
                <h3 class="titled-list__title">Events</h3>
                <ul class="titled-list__ul">
                    <li class="titled-list-li">
                        <a href="./special-events" class="site-footer__link">Parade Of Lights</a>
                    </li>
                    <li class="titled-list-li">
                        <a href="./special-events" class="site-footer__link">SeaFair</a>
                    </li>
                    <li class="titled-list-li">
                        <a href="./special-events" class="site-footer__link">Burials At Sea</a>
                    </li>
                </ul>
            </div>
            <div class="multi-columns__col titled-list">
                ...
            </div>
            <div class="multi-columns__col titled-list">
                ...
            </div>
    </div>
    <div class="site-footer__contact-container contact-box">
        <p class="contact-box__phone">(206) 123-4567</p>
        <p class="contact-box__address">
            <a href="#" class="contact-box__link">1234 Water St. Seattle, WA 98107</a>
        </p>
        <div class="contact-box__icons-container">
            <div class="icon icon--facebook"></div>
            <div class="icon icon--instagram"></div>
            <div class="icon icon--twitter"></div>
        </div>
    </div>
    <div class="site-footer__copyright-container">
        <p class="site-footer__copywrite">Copyright © 2017 Friendship Charters. All Rights Reserved.</p>
    </div>
</footer>

每个块都是一个上下文。每个 元素 都与其块上下文相关。这意味着一个块不知道它的位置。只有元素可以定位，与父块相关。在您的示例中，元素.site-footer__form-container、.site-footer__nav-container 等负责将子块.widget-area、.multi-columns 等定位在父块.site-footer 内。

如果模式重复，请记住重复使用相同的块 (.icon) 或元素 (.multi-columns__col)，并为可能的差异添加修饰符。

始终考虑如何使您的 CSS 类在网页的其余部分可重用（也许您可以在其他地方使用 .multi-columns 或 .icon？）。

如果某些东西可以是块但很小并且不能在其他地方重用（版权容器），那么您可以将它作为一个元素保留在父块中，因为它更简单。