CSS规范化oocss、BEM、SMAcss

oocss

尽可能的抽离出共用的css,一个类中写多个样式变为一个类对应一个样式

	.block{
		float:left;
		color:red;
	}
	// 变为
	.float-left{
	float:left;
	}
	.warning{
	color:red;
	}

BEM(Block,Element,Modifier)

Block（块） Element（元素） Modifier（修饰器）的简称;一种命名规范
B__E–M

.article { font-size: 16px; } 
.article__title { font-size: 24px; }
.article__title--red { color: red; }

SMAcss

• Categorizing CSS Rules（为css分类）
• Naming Rules（命名规范）
• Minimizing the Depth of Applicability（最小化适配深度）

SMACSS认为css有5个类别，分别是：

1. Base
2. Layout
3. Module
4. State
5. Theme or Skin

对应命名

1. Base Rules(Pass)

2. Layout Rules用l-或layout-这样的前缀，例如：.l-header、.l-sidebar。

3. Module Rules用模块本身的命名，例如图文排列的.media、.media-image。

4. State Rules用is-前缀，例如：.is-active、.is-hidden。

5. Theme Rules如果作为单独class，用theme-前缀，例如.theme-a-background、.theme-a-shadow。