难以理解 BEM 的好处

Question

我正在尝试学习 BEM，但很难理解它的好处。举个例子，我去Tailwind's Utility-First页面抓取这段代码：

<div class="chat-notification">
  <div class="chat-notification__logo-wrapper">
    <img class="chat-notification__logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification__content">
    <h4 class="chat-notification__title">ChitChat</h4>
    <p class="chat-notification__message">You have a new message!</p>
  </div>
</div>

  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification__logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification__logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification__content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification__title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification__message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }

看的时候不禁觉得应该简化成就行了

<div class="chat-notification">
  <img src="logo.jpg" alt="ChitChat Logo">
  <h4>ChitChat</h4>
  <p>You have a new message!</p>
</div>

.chat-notification {
  position:relative;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-sizing:border-box;
  padding-left: 3.5rem;
}
.chat-notification img {
  position:absolute;
  top:0;
  left:0;
  clip: rect(0,200,400,0);
    width: 3rem;
}
.chat-notification h4 {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
}
.chat-notification p {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
}

我基本上简化了 HTML，去掉了不必要的包装器、divitis、classitis。我的问题是，当 img、h4、p 等标签已经非常独特和语义化时，为什么像 __logo-wrapper 和 __title 这样的类描述符很有用？

Answer 1

1. 级联无法扩展。选择器.chat-notification img 或.chat-notification h4 意味着您的块chat-notification 不包含可以使用<img> 或<h4> 元素的子块。
2. 在选择器中使用元素会使代码不灵活。您可能希望显示<svg>、<canvas>、<video> 而不是<img>，但使用您当前的 CSS 代码之前需要更改 CSS 代码。您的 SEO 顾问会要求您将 <h4> 替换为 <h2>，并且您必须更改 CSS 选择器。

[编辑] 与 classitis 相关：BEM, Cascading styles and Classitis?

Answer 2

干得好，但是现在如果您尝试将修改后的代码放到具有相同习语的某个页面上，它将无法正常工作。这意味着级联无法按您的意愿工作。 CSS 模块可以作为解决此问题的一个选项，但它也使用类。

在大多数情况下，在 html 元素中删除类也没有现实的理由。浏览器喜欢绑定到它们的类和样式。单级类的工作速度比级联快得多。由于 zopfli/brotli，传输的字节数大致相等。删除类只会使源代码阅读更加困难。

但这只是关于课程。

我基本上简化了 HTML，去掉了不必要的包装器，divitis

简化 html markdown 通常是一件好事。 logo-wrapper 和 content 元素只是多余的，删除它们并不与 BEM 矛盾。例如：

<div class="chat-notification">
  <img class="chat-notification__logo" src="logo.jpg" alt="ChitChat Logo">
  <h4 class="chat-notification__title">ChitChat</h4>
  <p class="chat-notification__message">You have a new message!</p>
</div>

当像 img、h4、p 这样的标签已经非常独特和语义化时，为什么像 __logo-wrapper 和 __title 这样的类描述符很有用？

实际上，这个例子因为简单而没有说服力。这里我们只有三个字段和一个容器。当您只有很少的图像或很少有不同的“信息”（例如优点和缺点字段）时，您需要标记 img 和 p 标记。 img 也不是语义的东西，它是 HTML 世界的一个实体，但不是你的。这不仅仅是一个抽象的图像，它是一个logo，所以最好在语义上标记它。

最好将 HTML 视为一种低级生成的东西，有助于将我们的应用程序转换为浏览器。 这就是 BEMHTML 和 bem-react 这样的库存在的原因。

例如

({
    block: 'chat-notification',
    content: [
        { elem: 'logo', image: 'logo.jpg', text: 'ChitChat Logo' },
        { elem: 'title', content: 'ChitChat' },
        { elem: 'message', content: 'You have a new message!' }
    ],
})

Example with templates

Answer 3

非 BEM CSS 与 HTML 紧密耦合，即对 HTML 的更改可能会导致对 CSS 的更改。我认为这违背了 SOLID 编码原则，打破了开放-封闭和可能的单一责任原则。

如果 CSS 与 HTML 不紧密耦合会更好。

BEM 通过允许您创建不严格绑定到 HTML 元素并且可以更灵活地应用的 CSS 类的抽象结构来帮助解决此问题。

这是有代价的，您和您的团队需要记住抽象是什么，但我觉得它是最小的，因为 BEM 是一个相当简单的模型。

您也可能在大型代码库中遇到可能发生命名冲突的问题，但有一些工具可以帮助您解决这个问题，例如 CSS 模块。

我个人喜欢 BEM 并尽可能使用它。