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个类别,分别是:
- Base
- Layout
- Module
- State
- Theme or Skin
对应命名
-
Base Rules(Pass)
-
Layout Rules用l-或layout-这样的前缀,例如:.l-header、.l-sidebar。
-
Module Rules用模块本身的命名,例如图文排列的.media、.media-image。
-
State Rules用is-前缀,例如:.is-active、.is-hidden。
-
Theme Rules如果作为单独class,用theme-前缀,例如.theme-a-background、.theme-a-shadow。