css - 使用 BEM 时命名包装器元素类

Question

我理解在使用BEM时，classnames不应该直接反射(reflect)HTML结构，但是wrapper元素应该如何命名呢？ 请忽略我的特殊语法(接近 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

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

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

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