CSS的BEM规范

Css中BEM书写规范

BEM是Block（块）、Element（元素）、Modifier（修饰符）的简写，是一种组件化的 CSS 命名方法和规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块，从而使开发复杂的UI界面变得更简单和快，且不需要粘贴复制便可复用现有代码。

BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系：

引用：http://getbem.com/naming/

• __：双下划线 用来连接块和块的子元素
• -： 中划线，仅作为连字符使用
• --：双中划线 表示不同状态或不同版本

基本概念

• Block(块)

  代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套,可以嵌套任意多层。

• Element（元素）

  Element是Block的一部分，没有独立存在的意义。任何一个Element语义上是和Block绑定的。

• Modifier（修饰符）

  Modifier是Block或Element上的标记。使用它们来改变样式，行为或状态。与块或元素连接符为'--'。

实例

.overview {} /** 块 */
.overview__row {} /** 元素 */
.overview__row--right {} /** 修饰符 */

/** 嵌套写法 */
.overview{
  &__row {
    &__righu {
    }
  }
  &__row--right {
  }
}
/**
__和--的区别
  __ 表示的就是下级元素
  -- 表示的是不同的形态
      就是另一个类名，另一种样式，就像overview__row中有公共的样式，而overview__row--right中具有非公共的样式，是特有的样式

&符号表示嵌套的上一级
*/