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是一个很好的做法，现在创建元素，例如note-header，它将包含元素__title和__subtitle？

<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-前缀布局元素，例如容器，页眉，页脚。

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

BEM命名问题

1 个答案: