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

Posted 2023-02-23

【中文标题】使用 BEM 时命名包装器元素类

【英文标题】：Naming A Wrapper Element Class When Using BEM

【发布时间】：2015-09-23 13:31:51

【问题描述】：

我知道在使用 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。这让我很恼火，因为这有一个隐含的建议。

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

【问题讨论】：

既然

@Rob 别那么迂腐。这是为问题制作的示例。

一点也不迂腐。这是一个明显比你更有经验的人的技术观察。它有什么用途？

@Rob 下次我表现得像个笨蛋时，我会记得将其称为“技术观察”。

你的推理是不正确的，好像你的例子代表了一些典型的东西。不是，我试图指出这一点，但我会留给你。

【参考方案1】：

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

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

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

【讨论】：

谢谢。这是有道理的，尽管我认为我不喜欢包装器现在是类的***元素这一事实。包装器是布局更改时很容易变得不需要/需要的东西的完美示例，因此像这样将它耦合到页脚对我来说是错误的。通过将其视为子元素，可以轻松将其删除而不会影响其他任何内容。简而言之，您使页脚的独立性和便携性大大降低。

如果是这种情况，那么您可能会争辩说包装器不是特定于PageFooter 它特定于它周围的内容，因为它基于它周围事物的布局。因此，将它们解耦并将包装器绑定到站点的布局而不是 PageFooter?

可能是有意义的

是的。这正是我要解决的问题。它应该是容器的子元素，而不是页脚的一部分。我经常将元素视为带有子元素插槽的布局容器，所以我认为这实际上只是它的一种变体。

对于像 Foundation/Bootstrap 附带的容器、行、列之类的东西，我倾向于将它们作为自己的实体，它们通常非常通用，所以我不需要 @987654325 @ 特定容器。如果您在 React 构建组件的所有方式中都玩过，那么它们似乎与我倾向于处理基于 BEM 的 CSS 的方式非常接近

刚开始玩 React，你是对的。两者相得益彰。

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