我是否正确遵循BEM方法? [英] Am I following the BEM method correctly?
问题描述
<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方法论/样式指南.这让我很困惑.我永远不确定是否应该创建更多的块".这是正确的吗?感谢您的任何见解.
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.
推荐答案
对于BEM语法，您的代码正常.但是整体的，太语义化的，没有什么是可重用的.我建议使用以下块层次结构:
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)
- 图标(facebook)
- 图标(instagram)
- 图标(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>每个 block 是一个上下文.每个 element 都与其块上下文相关.这意味着块不知道其位置.只能定位与父块相关的元素.在您的示例中，元素
.site-footer__form-container，.site-footer__nav-container等负责将子块.widget-area，.multi-columns等放置在父块.site-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.如果重复一个模式，请记住重用相同的块(
.icon)或元素(.multi-columns__col)，并添加修饰符以消除可能的差异.If a pattern is repeated, remember to reuse the same blocks (
.icon) or elements (.multi-columns__col) and add modifiers for possible differences.始终考虑如何使CSS类在网页的其余部分中可重用(也许您可以在其他地方使用
.multi-columns或.icon吗?).Always think how to make your CSS classes reusable in the rest of the Web page (maybe you could use
.multi-columnsor.iconelsewhere?).如果某个东西可能是一个块，但是很小，并且无法在其他地方(版权容器)重复使用，那么您可以将其保留为父块中的一个元素，因为它比较简单.
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.
这篇关于我是否正确遵循BEM方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
