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?
I agree that adding ID’s (or classes) will make parsing of css faster.
The type of code you displayed in your question could very well be a skin for an existing piece of software where the skin developer does not have the option to add id’s to all the elements he wants to style. In this case one would have to resort to using the hierarchy to style specific items.
But to summarize:
Using id or classes is indeed faster and the best way to apply styles.