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-的块元素，如菜单、布局中的小标题等。

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，这只需要很小的调整，但是改变主要规则会弄乱你的其他标题。