现在我想知道的是,这在浏览器方面更有效率.通过多个小规则为每个按钮设置样式,如下所示：

.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文件很好,可读性/可维护性.

我特别感兴趣的是,每个标签具有更少的单个规则是否有性能优势,这使得最终拥有bazillion-line css文件是可以接受的.