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有害性能