浅谈我所见的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有利于提高开发效率，便于版本迭代。