css - 更多CSS，更少HTML？

哪种性能更好？

<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会被缓存，我想第二个会更好。
请帮帮我。

最佳答案

您可以计算由文件大小差异导致的平均性能差异，因为再获取一个TCP/IP包所需的时间乘以由于该更改而发生的可能性（即包大小除以添加的字符数）。
你可能会得到类似10 ms * 1/1000的东西，这会给你10 µs。
这是一个很小的性能差异，你必须把同一件事做了很多次，才能引起注意。
所以，你应该使用一个更清晰，更容易维护的。
就我个人而言，我会选择第一种。我发现，如果从类名到规则只有一条路径，而不是让一个类分散在多个规则中，那么更容易看到应用到元素的内容。