html - 我是否正确遵循了 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 方法/风格指南。这让我很困惑。我不确定我是否应该创建更多“ block ”。这是正确的吗？感谢您的任何见解。

Answer 1

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

• 网站页脚
  • 小部件区域
  • 多列
    • 标题列表(事件)
    • 标题列表(关于)
    • 标题列表(联系人)
  • 接触盒
    • 图标( Facebook )
    • 图标(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>

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

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

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

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