Question

假设我有许多按钮。每个按钮都有一个不同的图标，但都来自同一个精灵表。

现在我想知道的是，浏览器方面更有效率。通过多个小规则对每个按钮进行样式设置：

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

请注意

正在创建代码 Procedurally ，因此我只对解析，渲染等效果感兴趣，而不是最佳编码实践。
这只是一个玩具设置。实际上，游戏中有不同属性的组合（边框，字体等）。

只有少数臃肿的规则适用于每个标签，这些规则是否会超过必须提供更大的CSS文件？

非常感谢!!

[编辑]：到目前为止，感谢您的所有答案！为了澄清，我是使用SASS / SCSS。我正在使用的* .scss文件很好，可读性/可维护性。

我特别感兴趣的是，每个标签的个别规则越少，是否可以接受最终拥有bazillion-line css文件的性能优势。

Answer 1

好吧，如果那些button也适合.icon的角色，那么多个类名解决方案就完全可以了。

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

Answer 2

在这里查看不同的CSS样式及其性能 http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/

Answer 3

我不认为这里有任何正确或错误的答案......这两个例子都有效。

从个人经验来看，我认为我可能会在CSS略小的基础上选择第一个例子。请记住，当您使用网络时，每个字节都很重要，因此理想情况下，您希望尽可能减少代码，并且在这方面，在发布CSS之前，最好先缩小CSS（http://www.minifycss.com/）

你可以尝试的另一件事是SASS / SCSS。使用SASS代码构建您的样式，并了解它如何深入到标准CSS。（http://sass-lang.com/）

Answer 4

如果有疑问，请选择最小的代码（尽量保持可读性）。

浏览器将无法解析，这是一件好事。样式计算树会更小，如果浏览器缓存计算出的样式，那么无论如何说某个A得到它color - 来自a[href]，{{1}无关紧要}或a或a.link或其他。

我的回答是故意模糊的，因为CSS没有指定解析策略，浏览器可以自由地以其喜欢的方式实现CSS。有些浏览器以使用最少的内存而自豪，有些浏览器使用最快的页面处理器。然而，最小的代码将赢得那些阅读能力较低的人的追随者，以及顺便通过“阅读”理解事物的计算机中的追随者。

Answer 5

您的第一个答案绝对是最有效的方法。无论哪种方式，你都会得到相同的结果，但在你的第一个例子中，你将在css中保存代码行。这比第二个答案的性能提升非常小，但仍然更好。

另外，从这个角度考虑一下。如果你更改精灵表或重命名它不会更容易改变1路径而不是3路径？

现在，如果您需要使用脚本来解析css文件中的信息，那么请务必使用您的第二个答案。

结论：唯一的区别是你的css文件的大小可以忽略不计。

Answer 6

我认为另一个因素是，如果其他人将使用和编辑您的代码。您可能还记得，您已将所有其他规则嵌入到其他类中，但其他人可能更容易准确读取用于元素的类。

虽然我不怀疑性能提升很重要，但今天世界上的几个字节似乎正在尝试计算海滩上的沙粒。我认为编写可维护和可读的代码比尝试削减代码更重要。同样，高度主观性取决于代码的使用者和方式。

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

6 个答案: