CSS大小/性能？

Question

看看这个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文件应该很小,为什么它需要所有这些冗余选择器？

这是可能仅使用标识的将被解析的多快,当然-的CSS将较小.

我可以通过将此转换为id来尽可能缩小此css文件.我错过了什么吗？

Answer 1

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

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

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