HTML BEM 命名规则

Question

我正在学习 HTML BEM (CSS) 架构，即使看了一些 youtube 视频也不太了解。你们中的任何人都可以查看我的代码片段以查看我的 class 命名是否正确吗？

<div class="chat-offer">

  <div class="img chat-offer__img">
    <picture class="chat-box-b default-box-b">
      <img src="${properties.chatMobileImageBoxA}" alt="${properties.chatBackgroundImageAltText}"              class="offers-img-responsive">
    </picture>
    <picture class="chat-logout default-logout">
      <source media="(min-width: 320px) and (max-width: 767px)"               srcset="${properties.chatMobileImageBoxA}">
      <source media="(min-width: 768px) and (max-width: 1023px)" srcset="${properties.chatMobileImageBoxA}">
      <img src="${properties.chatDesktopImageBoxA}" alt="${properties.chatBackgroundImageAltText}" class="offers-img-responsive">
    </picture>
  </div>

  <div class="chat-offer__txt">
    <h1 class="chat-offer__txt--heading">${properties.offerTitle}</h1>
    <p class="chat-offer__txt--subheading">${properties.offerSubTitle}</p>
    <div class="chat-offer__btn">
      <a href="${chatOfferModel.loginCTALink}" target="${chatOfferModel.loginNewWindow}" class="chat-offer--cta">${properties.loginCTAText}</a>
    </div>
  </div>

</div>

Answer 1

命名看起来基本正确。我会提出以下建议：

我会将 chat-offer__txt 更改为 chat-offer__txt-wrapper。您将其附加到的元素实际上与您要添加该规则的修改版本的两个元素（h1 和 p）没有任何共同之处。
就个人而言，每当我在元素上看到修饰符 class 时，我也希望在同一元素上看到未修改的（元素或块）class。未修改的 class 设置修饰符覆盖的默认值。例如 h1.chat-offer__txt.chat-offer__txt--heading。
你有很多不相关的 "generic" class 与你的 BEM 混合在一起，例如 img、chat-box-b、default-box-b，这使得推断样式以及所有这些规则将如何相互作用变得更加困难。如果您正在使用 SASS，可能值得设置 mixin 以包含可跨多个组件重用的样式，这将使您的 BEM 更简单且更易于推理。

Answer 2

根据您的实施情况，我有几点建议：

看看下面的设置

<div class="chat-offer">
  <div class="img chat-offer__img">
    [..]
  </div>
</div>

第二个 div 是 chat-offer 块的 img 元素，但它不是图像。最好将其重命名为 chat-offer__image-container，因为它就是这样做的。它是图像的容器。这样你就可以使用 chat-offer__image 而不是 offers-img-responsive。所以新的实现将是：

<div class="chat-offer">
  <div class="chat-offer__image-container">
    [..]
    <img class="chat-offer__image />
  </div>
</div>

这个块也是如此：

<div class="chat-offer__txt">
  <h1 class="chat-offer__txt--heading">${properties.offerTitle}</h1>
  <p class="chat-offer__txt--subheading">${properties.offerSubTitle}</p>
  [..]
</div>

chat-offer__txt 暗示它是 chat-offer 块的 txt 元素，但事实并非如此。它是文本包装器，因此将其更改为带有 chat-offer__title 和 chat-offer__subtitle（或标题和副标题）的 chat-offer__text-wrapper，如下所示：

<div class="chat-offer__text-wrapper">
  <h1 class="chat-offer__title">${properties.offerTitle}</h1>
  <p class="chat-offer__subtitle">${properties.offerSubTitle}</p>
  [..]
</div>

这部分还可以改进一下：

<div class="chat-offer__btn">
  <a href="${chatOfferModel.loginCTALink}" 
    target="${chatOfferModel.loginNewWindow}" 
    class="chat-offer--cta">
    ${properties.loginCTAText}
  </a>
</div>

按钮是<a>[..]</a>部分，所以这样命名：chat-offer__button，目前它是chat-offer块上的--cta修饰符，所以你'基本上是说：这是一个 chat-offer 块，但它是它的 CTA 版本，但它是 chat-offer 块中按钮的 CTA 版本，使其成为 chat-offer__button chat-offer__button--cta。永远不要单独使用修饰符很重要，因为你的 css 看起来有点像这样：

.chat-offer__button {
  width: 300px;
  height: 20px;
  background-color: red;
}

.chat-offer__button--cta {
  background-color: blue;
}

如果只使用修饰符class，则不会使用按钮的宽度和高度。

你的方向是正确的，提问是其中的重要部分，所以请继续前进！

HTML BEM 命名规则

HTML BEM naming convention

html

css

bem