BEM 命名问题

Question

最近我开始在我的项目中使用 BEM 来组织 CSS，但现在我已经到了拥有这样的 html 的地步：

<div class="container">
   <div class="container__header">
      <div>TITLE</div>
      <div>SUBTITLE</div>
   </div>
   <div class="container__body">
   </div>
</div>

由于我更熟悉 SMACSS，我将带有标题和正文的容器视为布局相关样式。但是每个子页面上的标题内容会有所不同，有时它会有需要不同样式的标题/副标题，有时它会是一些完全不同的结构。就 SMACSS 而言，我会将其放在模块文件夹中并在那里进行管理，但现在使用 BEM 创建具有 __title 和 __subtitle 元素的元素（例如 note-header）是一种好习惯吗？

<div class="container">
   <div class="container__header note-header">
      <div class="note-header__title">TITLE</div>
      <div class="note-header__subtitle">SUBTITLE</div>
   </div>
   <div class="container__body note-body">
      ...
   </div>
</div>

这种方法的问题是，为了命名约定，note-header 大多数时候可能是空类。处理这种情况的最佳做法是什么

Answer 1

我个人使用三种元素，分别是：

l- 前缀 layout 元素，例如容器、页眉、页脚。

b- 前缀 block 元素，例如菜单、布局内的小标题等。

c-前缀组件元素，如按钮、链接等

这与修饰符说：c-button--white 和 c-button--black 工作正常。

为您的示例考虑以下结构：

<div class="l-container">
   <div class="b-note">
      <div class="b-note__title">TITLE</div>
      <div class="b-note__subtitle">SUBTITLE</div>
      <div class="b-note__content">
          <div class="c-button">
              <button class="c-button__button">Submit</button>
          </div>
      </div>
      <div class="b-slideshow">
          <div class="b-slideshow__title"></div>
      </div>
   </div>
</div>

在我的项目中，确保通用样式是独立的至关重要。因此，我尽量减少在其他元素中使用的任何块/类。这样可以避免以后的造型戏剧化，因为您也在其他地方使用b-note-header__title，这只需要稍作调整，但更改主要规则会弄乱您的其他标题。