7

查看这个 css 文件（尤其是最后5行）：

#page section .s_1 { overflow:hidden; width:435px; float:left;}
#page section .s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;}
#page section .s_1 menu { list-style:none;padding:0; margin:0;} 
#page section .s_1 menu li { float:left; padding:0; margin:0;} 
#page section .s_1 menu li a {background-image:url(../images/icon_buttons.png); background-repeat:no-repeat; width:79px; height:79px; display:block;}
#page section .s_1 menu li + li {margin-left:10px;}
#page section .s_1 menu li.b_1 a { background-position:0 0;}
#page section .s_1 menu li.b_2 a { background-position:-89px 0;}
#page section .s_1 menu li.b_3 a { background-position:-178px 0;}
#page section .s_1 menu li.b_4 a { background-position:-267px 0;}
#page section .s_1 menu li.b_5 a { background-position:-357px 0;}
...

这个大的 CSS 文件是编写 CSS 的正确方法吗？

我在许多站点中都看到了这种层次结构。

CSS 文件应该很小，为什么需要所有这些多余的选择器？

可以只使用解析速度更快的 ID ，当然 - CSS 会更小。

我可以通过将它转换为 id 来缩小这个 css 文件。我错过了什么吗？

4

5 回答 5

2

在解析方面，使用id's 会快得多。CSS

来自Mozilla 开发者，

尽可能使用最具体的类别

放缓的最大原因是标签类别中的规则太多。通过向我们的元素添加类，我们可以进一步将这些规则细分为类类别，从而消除了尝试匹配给定标签的规则所花费的时间。

这是关于这个主题的一个很好的研究，它也说明了这一点。

大多数昂贵的选择器往往是通用的选择器（“*”），以及具有多个类的选择器（“.foo.bar”、“foo .bar.baz qux”等）。我们已经知道这一点，但很高兴得到分析器的确认。

于 2013-01-02T08:15:36.450 回答
1

如果你只使用 id 的选择会更快，但你也必须做比使用类更多的选择。前提是css是干净的。一般来说，基于 id 的样式的问题是您放弃了对该样式的所有重用。

最好的方法是将样式链接到类。这为您提供了足够的速度并保持 css 文件更小。对于大多数站点的性能而言，较小的文件比在客户端上更快的执行更重要。一旦拥有所有资源，典型的客户端将在微秒内呈现一个复杂的页面。

您指出的 css 使用的是精灵，它很可能是用指南针或类似的东西生成的。在对质量做出严厉判断之前，查看原始代码也很重要。

于 2013-01-02T08:10:14.303 回答
1

如果你对最后 5 行特别感兴趣，classvsid辩论不是这里的主要内容。

第五行和第 7-11 行（最后五行）引用了精灵。（我相信你知道这一点。）使用六行来指代五个不同的图像是你将得到的一样有效。

此外，精灵通常使用类，因为图像将部署在不同的地方。

这些行的 CSS 效率问题是是否需要完整的参考。

更新：这个谷歌文档是无价的，因为它解释了浏览器如何解析 CSS。结果，它符合我在下面写的一些内容。浏览器对每个选择器从右到左工作，因此 它永远不会解析page section. 问题只是加载时间之一。

#page section .s_1 menu li.b_5 a.b_5 a如果这是使用精灵的唯一上下文，也可能是这样。我还将课程放在<a>自己身上，您可以将按钮类称为.b_5. 一个更好的 className 也不会误入歧途，无论是 IMO；额外的五个字符button_5不会杀死任何人:)

总体而言，您几乎可以肯定会#page section在不损失准确性和性能提升的情况下输掉比赛。的使用menu也很可能是不必要的。

至少，您可以毫无疑问地将其剥离为以下内容：

* {padding:0; margin:0;} /* Assuming this is already standard */
.s_1 { overflow:hidden; width:435px; float:left;}
.s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;}
.s_1 menu { list-style:none;} 
.s_1 li { float:left;} 
.s_1 menu li + li {margin-left:10px;}
.s_1 a {background-image:url(../images/icon_buttons.png); background-repeat:no-repeat; width:79px; height:79px; display:block;}
.b_1 { background-position:0 0;}
.b_2 { background-position:-89px 0;}
.b_3 { background-position:-178px 0;}
.b_4 { background-position:-267px 0;}
.b_5 { background-position:-357px 0;}

个人觉得这样.b_1,.b_2,.b_3,.b_4,.b_5比较好.s_1 a。background-repeat:no-repeat;如果您使用精灵并指定高度和宽度（除非宽度大于精灵），通常也不需要这样做。

如果你真的很热心，你可能会在决赛;之前输掉决赛}:)

于 2013-01-02T08:15:22.803 回答
1

我同意添加 ID（或类）将使 css 的解析更快。

您在问题中显示的代码类型很可能是现有软件的皮肤，其中皮肤开发人员无法选择将 id 添加到他想要设置样式的所有元素中。在这种情况下，人们将不得不求助于使用层次结构来设置特定项目的样式。

但总结一下：使用 id 或 classes 确实更快，并且是应用样式的最佳方式。

于 2013-01-02T08:05:42.243 回答
0

如果页面较小，使用 ID 可能是有意义的。但是想象一下，您的页面中有五个列表，每个列表下都有五个列表项。然后，您必须定义 5*5 ID 以在 css 中使用。这将是一个很大的文本，而且语法很糟糕。此外，一个项目可以多于一堂课。因此，每个类都可以多次使用（就像面向对象中的继承）。它还将减小 css 文本的大小并增加其可读性。

于 2013-01-02T08:11:39.413 回答