13

我知道在使用 BEM 时，类名不应该直接反映 HTML 结构，但是应该如何命名包装器元素？请忽略我的特殊语法（接近SUIT）；它仍然遵循 BEM，只是采用了不同的方式来区分元素。

例如：

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

我目前将这个实例中的包装器归类为PageFooterWrapper，但这感觉很笨拙，因为包装器不是独立的 - 它纯粹是为PageFooter. 显然，在所有内容前加上前缀PageFooter-是荒谬的，因此只能将包装器视为 : 的PageFooter一部分PageFooter-wrapper。这让我很恼火，因为这有一个隐含的建议。

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

4

2 回答 2

22

我一直对待它的方式是包装器应该始终是块，所以：

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

B锁包含元素，所以我没有在我的 B 锁周围放一些东西，而是遵循了元素原则并开始使用inner's 而不是容器

于 2015-07-06T12:09:33.143 回答
8

我实际上已经成功使用了两个类，我的模式如下：

<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 的解决方案。

于 2015-07-16T21:09:37.760 回答