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语法。但是单片，过于语义，没有什么是可重用的。我建议使用以下块的层次结构：

位点尺
- 插件区域
- 多列
  - 标题列表（事件）
  - titled-list（about）
  - 标题列表（联系人）
- 接触盒
  - icon（facebook）
  - icon（instagram）
  - icon（twitter）

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

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

我是否正确遵循BEM方法？

1 个答案: