不同CSS技术及其CSS性能

OOCSS样式:一个主class，包含所有的共同规则，然后一个独特的规则使用其他class

.box {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFee;}
...

@extend样式:将所有的独特class归为一个，逗号分隔的使用公用属性的class列表。

.box-1,.box-2 {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFEE;}
...

长(肿胀)样式：所有的公共样式都分离到独一无二的class中。

.box-1 {
  padding:25px;
  border:1px solid #000;
  border-radius:5px;
  background-color:FFEE00;}
.box-2 {
  padding:25px;
  border:1px solid #000;
  border-radius:5px;
  background-color:00FFEE;}
...

测试结果

• 类(class)选择器和ID选择器基本上是相同的速度
• SASS/Compass的@extend格式仅稍稍落后于OOCSS格式
• 臃肿的格式在大数量级速度比其他格式明显要慢
• 即使是极端的情况，最好与最坏的时间差异也在100-200毫秒之间

• OOCSS和@extend格式相当快
• 肿胀的CSS有害性能