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>

B 锁定包含 E 元素，因此我只需按下 B 锁定，而不是 B 锁定/ strong> lement原则并开始使用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时命名包装元素类

2 个答案: