浅谈我所见的CSS命名风格

在两年工作中，总结一下我所见的css命名风格。

1.单一class命名

.header {
  width: 500px;
}
.item {
  text-indent: 20%;
}

优点：简单，渲染效率高。

缺点：零散，没有模块化。

2. 后代选择器class命名

.header .item a {
  font-size:14px;
}
.header .item a span {
  color:#000;
}

优点：模块化，只对当前模块有效。

缺点：渲染效率低，增加冗余字符。

3.前缀叠加class命名

.header {
    width: 100%;
    height: 80px;
}

.header-item {
    font-size: 14px;
}

.header-item-a {
    color: #0066ff;
}

优点：可读性好，渲染效率高。

缺点：增加冗余字符。

4.OOCSS（面向对象）命名

.tr { 
  text-align: right;
}
.pb8 {
  padding-bottom: 8px;
}

优点：语义化，可读性好，渲染性能高。

缺点：不利于频繁重构代码。比如修改上面的padding-bottom的距离，假如改成7px话，是不是类名pb8也要改成pb7。

5.BEM（块、元素、修饰符）命名

.header {
  width: 300px;
  height: 400px;
}

.header__item { 
  font-size: 16px;
} 

.header--blue { 
  background: #0066ff;
}

优点：语义化，可读性好，渲染性能高。

缺点：暂时没有发现。

6.BEM（块、元素、修饰符）驼峰式class命名

.header {
    width: 100%;
    height: 80px;
}
.header-item {
    font-size：16pc;
}
.header-isShow {
    display: block;
}

优点：类似于BEM风格，无需区分下划线还是是中横线，可读性好，渲染性能高。

缺点：暂时没有发现。

PS:具体问题具体分析，合理的命名css有利于提高开发效率，便于版本迭代。