我是否正确遵循了 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 methodology/style 指南。这让我很困惑。我不确定是否应该创建更多 'blocks'。这是正确的吗？感谢您的任何见解。

Answer 1

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

site-footer
- widget-area
- multi-columns
  - titled-list（事件）
  - titled-list（约）
  - titled-list（联系人）
- contact-box
  - 图标（脸书）
  - 图标（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>

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

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

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

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

我是否正确遵循了 BEM 方法？

Am I following the BEM method correctly?

html

css

bem