7

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

现在我想知道的是，浏览器更有效。通过多个小规则设置每个按钮的样式，如下所示：

.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 文件很好，具有可读性/可维护性。

我特别感兴趣的是，每个标签减少单独的规则是否会带来性能优势，这是否会使得在最后拥有一个 bazillion-line css 文件是可以接受的。

4

6 回答 6

4

好吧，如果这些buttons 也适合 an 的角色.icon，那么多类名解决方案就很好了。

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

于 2012-10-11T13:14:30.347 回答
1

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

于 2012-10-11T13:16:48.653 回答
0

我认为这里没有任何正确或错误的答案……这两个例子都可以。

根据个人经验，我认为我可能会选择第一个示例，因为 CSS 稍微小一些。请记住，当您使用 Web 时，每个字节都很重要，因此理想情况下，您希望尽可能地精简代码，在这方面，在发布之前缩小 CSS 总是好的（http://www. minifycss.com/ )

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

于 2012-10-11T13:15:17.290 回答
0

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

浏览器需要解析的内容会更少，这是一件好事。A样式计算树会更小，如果浏览器缓存了计算的样式，那么无论如何说一个特定的得到它是无关紧要的color- from a[href], aor a.linkor .linkor什么。

我的回答故意含糊不清，因为 CSS 没有指定解析策略，浏览器可以自由地以任何它喜欢的方式实现 CSS。有些浏览器以使用最少的内存而自豪，有些则以拥有最快的页面处理器而自豪。然而，最小的代码会让你在阅读量较少的人中赢得追随者，在那些偶然也通过“阅读”来理解事物的计算机中赢得追随者。

于 2012-10-11T13:15:34.707 回答
0

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

另外，请从这个角度考虑。如果您更改精灵表或重命名，更改 1 条路径而不是 3 条路径会不会容易得多？

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

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

于 2012-10-11T13:15:48.730 回答
0

我认为另一个因素是其他人是否会使用和编辑您的代码。您可能会记得您已将所有附加规则嵌入到其他类中，但其他人可能更容易准确地阅读元素正在使用哪些类。

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

于 2012-10-11T13:20:31.413 回答