BEM规范

BEM

一种前端命名规范

块 Block, 元素 Element, 修饰符 Modifier

让CSS便于团队开发规范和方便维护。

解决团队对于 class 共用与重写问题，并且更好组织程序员之间的合作。

Block: 独立实体，本身是有意义的

Element: 独立实体的一部分，并在语义上与相应独立实体绑在一起

Modifier: 用于改变元素的外观或行为

<button class="button button-state-success"></button>
<button class="button button-state-danger"></button>

.button即为按钮的通用样式

.button-state-*即按钮一些状态下指定的样式

这样命名可以帮助我们更好地记住高频率使用地样式以及更加方便修改样式主题。

• 模块化

  块样式永远不依赖于页面上的其他元素，因此你不会遇到级联问题。你还可以将已完成项目中的块转移到新项目。

• 可复用性

  以不同方式组合独立块，并智能地重用它们，减少了你必须维护的CSS代码量。
  有了一套样式指南，你可以构建一个块库，使你的CSS超级有效。

• 结构

  使样式通俗易懂

OOCSS

一种撰写 CSS 的设计模式

• 减少对 HTML 结构的依赖

  减少级联样式与元素之间依赖性，以单独的 class 样式说明级联关系。

  <header class="header">
      <i class="header-icon"></i>
      <span class="header-title"></span>
      <div class="header-block"></div>
  </header>
  

  .header-icon代表了 header 容器里面的图标样式

  .header-title代表了 header 容器里面的标题样式

  .header-block代表了 header 容器里面的级联容器

• 增加 CSS class 重复性的使用

  减少重复的样式代码，以捆绑地形式说明部分相同代码下，不同样式的选择性以及它的含义。

  .button {
      display: inline-block;
      padding: 6px 12px;
      color: hsla(0, 100%, 100%, 1);
      &.button-default { background: hsla(180, 1%, 28%, 1); }
      &.button-primary { background: hsla(208, 56%, 53%, 1); }
  }
  

  <button class="button button-default"></button>
  <button class="button button-primary"></button>
  

  .button代表了元素是一个按钮样式

  .button-default 与 .button-primary 代表了相同按钮不同的背景色或区别两者不同地作用。

例子：组件 | Element

BEM — Block Element Modifier (getbem.com)

BEM: A New Front-End Methodology — Smashing Magazine

CSS设计模式：OOCSS 和 SMACSS - SegmentFault 思否