CSS size/performance?

Question

Looking at this css file (especially the last 5 lines):

#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;}
...

Is this big CSS file is the correct way of writing CSS's ?

I see this kind of hierarchy in many sites.

The CSS file should be small, why does it need all these redundant selectors?

It's possible to use only Id's which will be parsed much faster, and of course - the CSS will smaller.

I could shrink this css file by converting this to id's where I can. Am I missing something?

Answer 1

Using id's will be much faster in terms of CSS parsing.

From Mozilla Dev,

Use the most specific category possible

The single biggest cause of slowdown is too many rules in the tag category. By adding classes to our elements, we can further subdivide these rules into Class Categories, which eliminates time spent trying to match rules for a given tag.

Here is a good research on this subject, which states this as well.

Most expensive selectors tend to be universal ones ("*"), and those with multiple classes (".foo.bar", "foo .bar.baz qux", etc.). We already knew this, but it’s nice to get confirmation from profilers.