假设我有很多按钮。每个按钮都有一个不同的图标，但都来自同一个精灵表。
现在我想知道的是，在浏览器方面，哪个更高效。通过多个小规则对每个按钮进行样式设置，如下所示：
.icon {
background-image: url('iconsheet.png');
}
.a-button {
background-position: -x -y;
}
.b-button {
background-position: -x -y;
}
.c-button { ...
<input class="icon a-button"> blabla ...
还是这样更好：
.a-button {
background-image: url('iconsheet.png');
background-position: -x -y;
}
.b-button {
background-image: url('iconsheet.png');
background-position: -x -y;
}
.c-button {
background-image: url('iconsheet.png');
background-position: -x -y;
}
<input class="a-button"> blabla ...
请注意
- 代码是按程序创建的，所以我只对解析、渲染等效果感兴趣，而对最佳编码实践不感兴趣
- 这只是一个玩具场景。事实上，有更多不同属性的组合在发挥作用(边框、字体等)
只有几个臃肿的规则应用于每个标签，这比提供更大的CSS文件有什么好处吗？
非常感谢！！
[编辑]：感谢您迄今为止的所有回答！为了澄清，我正在使用SASS/SCSS。我正在使用的*.scss文件很好，可读性和可维护性都很好。
我特别感兴趣的是，每个标签的单个规则更少是否会带来性能优势，从而可以接受在末尾有一个数百万行的css文件。
好吧，如果这些button也适合.icon的角色，那么多类名解决方案就完全可以了。
在编写CSS时，不要考虑性能或文件大小，想想什么是有意义的。如果有意义，它将是有效的。
在这里查看不同的css样式及其性能http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/
我认为这里没有任何正确或错误的答案。。。这两个例子都会奏效。
根据个人经验，我认为我可能会选择第一个例子，因为CSS稍微小一些。记住，当你使用网络时，每个字节都很重要，所以理想情况下，你想尽可能精简你的代码，在这方面，在发布CSS之前缩小它总是很好的(http://www.minifycss.com/)
另一个你可以尝试的方法是SASS/SCSS。用SASS代码构建你的风格，看看它是如何深入到标准CSS的。(http://sass-lang.com/)
如果有疑问，请选择最小的代码(也尽量保持可读性)。
浏览器将减少需要解析的内容，这是一件好事。样式计算树会更小，如果浏览器缓存计算的样式，那么不管怎样，特定的A是如何从a[href]、a、a.link或.link或其他什么得到它的color都无关紧要。
我的答案是故意含糊的，因为CSS并没有指定解析策略，浏览器可以自由地以任何方式实现CSS。有些浏览器以使用最少的内存而自豪，有些则以拥有最快的页面处理器而自豪。然而，最小的代码会在那些阅读量较小的人中赢得追随者，在那些偶然也能通过"阅读"理解事物的计算机中赢得追随者。
你的第一个答案肯定是最有效的方法。无论哪种方法，你都会得到相同的结果，但在第一个例子中，你将代码行保存在css中。与第二个答案相比，这是一个非常小的性能提升，但它仍然更好。
另外，从这个角度来思考。如果你更改精灵表或重命名它，更改1条路径不是比更改3条路径容易得多吗？
现在，如果您需要使用脚本来解析css文件中的信息，那么一定要使用第二个答案。
结论：唯一的区别是css文件的大小可以忽略不计。
我认为另一个因素是其他人是否会使用和编辑您的代码。您可能还记得，您已经将所有附加规则嵌入到其他类中，但其他人可能更容易准确地读取元素所使用的类。
虽然我毫不怀疑性能的提高很重要，但在当今世界，几个字节似乎就像我们在努力计算海滩上的沙粒。我认为编写可维护和可读的代码比精简代码更重要。同样，高度主观取决于代码的使用者和使用方式。