更多的CSS，更少的HTML？

Question

哪种表现更好？

<a class="btn loginbtn" href="#">Login</a>​

.btn {
    background: #555 
}
.loginbtn {
    padding: 10px
}​

或

<a class="loginbtn" href="#">Login</a>​

.btn,.loginbtn {
    background: #555  
}
.loginbtn {
    padding: 10px     
}​

由于我的CSS将被缓存，我认为第二个会更好。

请帮帮我。

Answer 1

您可以计算由文件大小差异引起的平均性能差异，即获取一个或多个TCP / IP程序包所需的时间乘以由于该更改而发生的概率（即数据包大小除以添加的字符）。

您可能会获得类似10 ms * 1/1000的内容，它会为您提供10 µs。

这是一个如此小的性能差异，你必须在它显着之前做出相同的事情。

所以，你应该使用更清晰，更容易维护的那个。

我个人会选择第一个选项。如果从类名到规则有一条路径，而不是让一个类分散在多个规则中，我会发现更容易看到应用于元素的内容。

Answer 2

两者之间的差异非常小，我更关心代码可维护性和可能 selector performance。

如果您确实处于从单个字节中删除html的好处加起来很重要的位置，您可能需要检查支持CSS类重命名的closure-stylesheets等。