使用BEM时命名包装元素类

Question

我知道在使用BEM时,类名不应该直接反映HTML结构,但是如何命名包装元素呢？请忽略我的特定语法(靠近SUIT); 它仍然遵循BEM,只是采用不同的方式来区分元素.

例如:

<div class="?">
  <footer class="PageFooter">
    <h4 class="PageFooter-brand>…</h4>
    <ul class="PageFooter-contactDetails">…</ul>
  </footer>
<div>

我现在将这个包装器在这个实例中分类为PageFooterWrapper,但是这感觉很笨,因为包装器不是独立的 - 它纯粹存在于PageFooter.显然,为所有内容添加前缀PageFooter-是荒谬的,所以只留下将包装作为以下内容的一部分PageFooter:PageFooter-wrapper.这让我感到不安,因为有一个隐含的建议应用于此.

那么包装器的类应该是什么？

Answer 1

我一直对待它的方式是包装应该始终是块,所以:

<div class="PageFooter">
  <footer class="PageFooter-inner">
    <h4 class="PageFooter-brand">...</h4>
    <ul class="PageFooter-contactDetails">...</ul>
  </footer>
</div>

该乙锁包含é lements有我周围的东西,而不是使乙锁我刚刚与随后沿Ë字元素原理和使用开始inner的,而不是容器

Answer 2

我实际上已成功使用了两个类,我的模式如下:

<div class='page-section bem-block'>
    <div class='bem-block__element'>
        <!-- etc etc -->
    </div>
</div>

有效地使用实用程序类来执行某些包装函数.CSS可能与此类似:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

我发现这在实践中很有效.它也可能.bem-block是同时代的继承者.page-section.

这个解决方案是Dan Gamble的补充.