Am I following the BEM method correctly? - html

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">
Parade Of Lights
</li>
<li class="site-footer__list-item">
SeaFair
</li>
<li class="site-footer__list-item">
Burials At Sea
</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">
Owners
</li>
<li class="site-footer__list-item">
Blog
</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">
Wedding Info
</li>
<li class="site-footer__list-item">
Wedding Menus
</li>
</ul>
</div>
</div>
<div class="site-footer__contact-container">
<p class="site-footer__phone">[phone]</p>
<p class="site-footer__address">
1234 Water St. Seattle, WA 98107
</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">
Parade Of Lights
</li>
<li class="titled-list-li">
SeaFair
</li>
<li class="titled-list-li">
Burials At Sea
</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">[phone]</p>
<p class="contact-box__address">
1234 Water St. Seattle, WA 98107
</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.