Am I following the BEM method correctly?

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>

Here I am trying to write the HTML for a footer of a website, and I am wondering if I am correctly following the BEM methodology/style guide. It's pretty confusing to me. I'm never sure if I should create more 'blocks' or not. Would this be correct? Thanks for any insight.

Answer 1

Your code is OK for the BEM syntax. But monolithic, too semantic, and nothing is reusable. I suggest to use the following hierarchy of blocks:

• site-footer
  • widget-area
  • multi-columns
    • titled-list (events)
    • titled-list (about)
    • titled-list (contact)
  • contact-box
    • icon (facebook)
    • icon (instagram)
    • icon (twitter)

The HTML code:

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

Each block is a context. Each element is related to its block context. That means a block is not aware where it is positioned. Only elements can be positioned, related to the parent block. In your example, the elements .site-footer__form-container, .site-footer__nav-container, etc. are responsible for positioning the child blocks .widget-area, .multi-columns, etc. inside the parent block .site-footer.

If a pattern is repeated, remember to reuse the same blocks (.icon) or elements (.multi-columns__col) and add modifiers for possible differences.

Always think how to make your CSS classes reusable in the rest of the Web page (maybe you could use .multi-columns or .icon elsewhere?).

If something could be a block but is small and not reusable elsewhere (the copyright container), then you can keep it as an element in the parent block just because it is simpler.