简介

BEM 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

当涉及更大，更复杂的项目时，如何组织代码是至少在以下三种方式中提高效率的关键：它会影响您编写代码所需的时间，您需要多少代码写，以及您的浏览器必须加载多少。当您与众不同的团队合作时，这一点变得尤为重要。

优点

模块化

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

可重用性

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

结构化

BEM 方法为您的 CSS 代码提供了一个简单易懂的结构。

命名

正确的样式指南可以显着提高开发速度，调试以及遗留代码中新功能的实现。遗憾的是，大多数 CSS 代码有时是在没有任何结构或命名约定的情况下开发的。从长远来看，这会导致无法维护的 CSS 代码。

BEM 方法确保参与网站开发的每个人都使用正确的命名将为您准备网站设计的变化。

块

封装一个独立的实体，它本身就是有意义的。虽然块可以嵌套并相互交互，但在语义上它们保持相等; 没有优先权或等级制度。没有 DOM 表示的整体实体（例如控制器或模型）也可以是块。

命名

块名称可以包含拉丁字母，数字和短划线。要形成 CSS 类，请为namespacing添加一个简短的前缀：.block

HTML

如果接受类名，则任何 DOM 节点都可以是块。

  1. <div class="block">...</div>

CSS
  • 仅使用类名称选择器
  • 没有标签名称或 ID
  • 不依赖于页面上的其他块/元素
  1. .block {color：＃042; }

元素

块的一部分并没有独立的含义。任何元素在语义上与其块相关联。

命名

元素名称可以包含拉丁字母，数字，短划线和下划线。CSS 类形成为块名称加上两个下划线加上元素名称：.block__elem

HTML

块中的任何 DOM 节点都可以是元素。在给定块内，所有元素在语义上都是相等的。

  1. <div class =“block”>
  2.    ...
  3.    <span class =“block__elem”> </ span>
  4.  </ DIV>

CSS
  • 仅使用类名称选择器
  • 没有标签名称或 ID
  • 不依赖于页面上的其他块/元素

好

  1. .block__elem {color：＃042; }

坏
**

  1. .block .block__elem {color：＃042; }
  2.  div.block__elem {color：＃042; }

修饰符

块或元素上的标志。使用它们来改变外观，行为或状态。

命名

修饰符名称可能包含拉丁字母，数字，短划线和下划线。CSS 类形成为块的或元素的名称加上两个破折号：.block--mod 或 .block__elem--mod 和 .block--color-black 与 .block--color-red 。复杂修改器中的空格由短划线替换。

HTML

修饰符是您添加到块/元素 DOM 节点的额外类名。仅将修饰符类添加到它们修改的块/元素，并保留原始类：

好
**

  1. <div class="block block--mod">...</div>
  2.     <div class="block block--size-big
  3.         block--shadow-yes">...</div>

坏
**

  1. <div class="block--mod">...</div>

CSS

使用修饰符类名作为选择器：

  1. .block--hidden { }

要基于块级修饰符更改元素：

  1. .block--mod
  2. .block__elem { }

元素修饰符：

  1. .block__elem--mod { }

例

假设你有块形式修饰 theme: "xmas"和 simple: true 与元素 input 和 submit ，和元素 submit 与自己修改 disabled: true 的，而不是填补它没有提交表格：

HTML
  1. <form class="form form--theme-xmas form--simple">
  2.   <input class="form__input" type="text" />
  3.   <input
  4.     class="form__submit form__submit--disabled"
  5.     type="submit" />
  6. </form>

CSS
  1. .form { }
  2. .form--theme-xmas { }
  3. .form--simple { }
  4. .form__input { }
  5. .form__submit { }
  6. .form__submit--disabled { }

参考

【1】BEM 官网
【2】CSS — BEM 命名规范@Pandaaa
【3】从支付宝 tabbar 看 BEM@good_morning