Html CSS大小/性能？

查看此css文件（尤其是最后的5行）：

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

我在许多网站上看到这种层次结构

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

可以只使用Id，解析速度更快，当然，CSS会更小

我可以把这个css文件转换成id来缩小它。我遗漏了什么吗？

我同意添加ID（或类）将加快css的解析速度

您在问题中显示的代码类型很可能是现有软件的外观，而外观开发人员没有向其想要设置样式的所有元素添加id的选项。在这种情况下，必须使用层次结构来设置特定项目的样式

但总而言之： 使用id或类确实更快，也是应用样式的最佳方式。

如果您愿意，但与使用类相比，您还需要进行更多的选择。只要css是干净的。基于id的样式通常的问题是您放弃了对该样式的所有重用

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

---

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

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

如果您对最后5行特别感兴趣，这里的主要问题不是

类与
id
之争

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

此外，精灵通常使用类，因为映像将部署在不同的位置

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

更新：是无价的，因为它解释了浏览器如何解析CSS。因此，它使一些
我在下面写的。对于每个选择器，浏览器从右向左工作，因此
它永远不会解析
页面部分。问题只是加载时间的问题之一

#page section.s_1菜单li.b_5 a
也可以是
.b_5 a
，如果这是使用精灵的唯一上下文。我自己也把这个类放在
上，你可以把button类称为
.b_5
。更好的类名也不会误入歧途；
按钮5
中额外的五个字符不会杀死任何人：）

总的来说，几乎可以肯定的是，您可能会丢失
#页面部分
，而不会丢失准确性和性能增益。使用
菜单
也很可能是不必要的

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

* {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_1a
更好。通常也不需要背景重复：无重复如果使用精灵并指定高度和宽度（除非宽度大于精灵）

如果你真的很感兴趣，你可能会失去最后的
}
之前，使用
id
将在
CSS
解析方面更快

从

尽可能使用最具体的类别

经济放缓的一个最大原因是标签中的规则太多
类别通过向元素添加类，我们可以进一步细分
将这些规则划分为类类别，这样就省去了尝试的时间
匹配给定标记的规则

这里有一个关于这个问题的报告，也说明了这一点

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

一定要看一看@PranavKapoor是的，我已经看过了。它说，“经济放缓的最大原因是标签类别中的规则太多”。但是，我在很多网站上都看到了。只是想知道我是否失踪了something@downvoter-谢谢。（反对票，但不解释你的理由）赞成票。。只是为了不加评论地反对否决票。@RoyiNamir是的，
id上面的
更有意义。我的意思是笼统的。你说得对。这个css来自设计我们网站的第三方公司。我相信他们用了一些皮肤。所以你是说我应该改变这个CSS，把ID放在我能放的任何地方？这取决于你愿意花多少时间在那些只会节省你几毫秒的事情上。使用ID/类更快，我鼓励在新环境中使用ID/类。但是，除非你处理的是一个需要很长时间才能加载的巨大CSS文件，否则我会保持原样。您更快的解析时间只会稍微值得注意，可能不值得这么做。我的意思是把ID放在菜单上，当然是第一个孩子选择器。（>）我只是说我可以删除血腥的
#页面部分。s_1
，你需要再次删除
* {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;}