使用 BEM 时命名包装器元素 Class

Question

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

例如：

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

我目前 class 包装器在此实例中为 PageFooterWrapper，但这感觉很笨拙，因为包装器不是独立的 - 它纯粹为 PageFooter 存在。显然，用 PageFooter- 作为前缀是荒谬的，因此只剩下将包装器视为 PageFooter 的一部分：PageFooter-wrapper。这让我很恼火，因为这暗示了建议的应用。

那么wrapper的class应该是什么？

Answer 1

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

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

B锁包含 E 元素，所以我的 B 锁周围没有东西我只是遵循 E 元素原则并开始使用 inner 而不是容器

Answer 2

我实际用过两次类成功，我的模式如下：

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

有效地使用 utility class 来执行某些包装函数。 css 可能与此类似：

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

我发现这在实践中效果很好。 .bem-block 和它同时代的人也有可能继承自 .page-section.

这个解决方案补充了 Dan Gamble 的解决方案。

使用 BEM 时命名包装器元素 Class

Naming A Wrapper Element Class When Using BEM

css

naming-conventions

wrapper

nested

bem