我在想,解析和渲染性能可能会对CSS中的规则有什么影响。CSS性能 - 分组还是不分组?
方法1:
.class1 {
margin: 10px;
padding: 20px;
color: #ccc;
}
.class2 {
margin: 10px;
padding: 30px;
color: #ddd;
}
.class3 {
margin: 20px;
padding: 30px;
color: #eee;
}
.class4 {
margin: 20px;
padding: 20px;
color: #fff;
}
VS approach2:
.class1,
.class2 {
margin: 10px;
}
.class3,
.class4 {
margin: 20px;
}
.class1,
.class4 {
padding: 20px;
}
.class2,
.class3 {
padding: 30px;
}
.class1 {
color: #ccc;
}
.class2 {
color: #ddd;
}
.class3 {
color: #eee;
}
.class4 {
color: #fff;
}
当然,我们说的是用同样的规则分组大css文件,所以同样的选择有时会裂成许多块。
它是否会影响css解析和渲染,足以放弃这种方法来支持更大的文件,但更干净并在一个选择器中收集所有规则?
选择器匹配可能很昂贵。在现实生活中,每个选择器不只是一个类,而是2-3个嵌套类。因此,对于每个元素,浏览器必须匹配选择器三次以应用所有规则。首先是边距,然后是填充,然后应用颜色。第二种方法似乎非常昂贵。
此外,分组被采取到一个非常极端的水平。不按类似元素的逻辑进行分组,但实际上所有元素具有相同的规则值。 在我看来,它是过度的。 – kali187
overDRYing也是一个不好的做法 http://joelabrahamsson.com/the-dry-obsession/ – kali187