难以理解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。我的问题是，当__logo-wrapper，__title，img之类的标记已经非常独特且具有语义时，为什么像h4和p这样的类描述符有用吗？

Answer 1

1. 级联不缩放。选择器.chat-notification img或.chat-notification h4表示您的块chat-notification不包含可以使用<img>或<h4>元素的子块。
2. 在选择器中使用元素会使代码不灵活。您可能想要显示<svg>，<canvas>，<video>而不是<img>，但是对于您当前的CSS代码，需要在之前更改CSS代码。您的SEO顾问会要求您将<h4>替换为<h2>，然后您必须更改CSS选择器。

[[EDIT]与分类炎有关：BEM, Cascading styles and Classitis?

Answer 2

做得好，但是现在，如果您尝试使用相同的惯用法将修改后的代码放入某个页面，它将无法正常工作。这意味着级联无法按您希望的那样工作。CSS模块可以解决这个问题，但它也使用类。

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

但这只是关于类。

我基本上简化了HTML并摆脱了不必要的包装器，神态

简化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编码原则背道而驰，打破了开放式和封闭式以及可能的单一责任原则。