不同CSS技术及其CSS性能-优快云博客

本文探讨了OOCSS、SASS/Compass的@extend及长(肿胀)样式三种CSS组织方式的性能表现。通过实验发现，OOCSS和@extend格式加载速度快，而肿胀的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有害性能

转载于:https://www.cnblogs.com/NatChen/p/7873038.html