html - CSS - 许多小规则与少数大规则

Question

假设我有许多按钮。每个按钮都有不同的图标，但都来自同一个 sprite-sheet。

现在我想知道的是，哪个浏览器更高效。通过像这样的多个小规则设置每个按钮的样式:

.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 ...

请注意

1. 代码是按程序创建的，所以我只对解析、渲染等效果感兴趣，而不是最佳编码实践。
2. 这只是一个玩具设置。实际上，有更多不同属性(边框、字体等)的组合在起作用。

仅对每个标签应用一些臃肿的规则是否比必须提供更大的 CSS 文件有任何好处？

非常感谢!!

[编辑]:感谢您到目前为止的所有回答!澄清一下，我使用的是 SASS/SCSS。我正在使用的 *.scss 文件在可读性/可维护性方面都很好。

我特别感兴趣的是，每个标签的单独规则越少，是否会带来性能优势，从而使最后拥有大量行的 css 文件变得可以接受。

Answer 1

好吧，如果那些 button 也适合 .icon 的 Angular 色，那么多类名解决方案就非常好。

编写 CSS 代码时，不要考虑性能或文件大小，要考虑什么是有意义的。如果它有意义，那将是高效的。