CSS size / performance?

Question

Take a look at this css file (especially the last lines of 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;} ... 

Is this large CSS file the right way to write CSS?

I see such a hierarchy on many sites.

The CSS file should be small, why all these redundant selectors are needed?

You can use only Id, which will understand much faster, and, of course, CSS will be less.

I could compress this css file by turning it into id where I can. Did I miss something?

Answer 1

I agree that adding identifier (or classes) will speed up css parsing.

The type of code that you displayed in your question may well be the skin for existing software in which the skin developer is not able to add an identifier to all the elements that he wants to create. In this case, you will have to resort to using a hierarchy to create specific elements.

But to recap: Using id or classes is really faster and the best way to apply styles.

Answer 2

Using id will be much faster in CSS expression.

From Mozilla Dev ,

Use the most appropriate category

The biggest reason for the slowdown is too many rules in the category tag. By adding classes to our elements, we can further subdivide these rules into class categories, which eliminates the time spent trying to comply with the rules for this tag.

Here are some good studies on this, which also talks about it.

The most expensive selectors tend to be universal ("*"), and those with multiple classes (".foo.bar", "foo.bar.baz qux", etc.). We already knew this, but its nice to get confirmation from the profilers.

Answer 3

If you use only id, the choice will be faster , but you will also have to make more choices than if you used classes, provided that css is clean. The problem with the base style in id in general is that you refuse to reuse this style.

The best way is to associate a style with classes. This gives you enough speed and reduces the size of the css file. Smaller files are much more important for performance on most sites than faster execution on the client. Typical clients will display a complex page in microseconds as soon as they have all the resources.

You indicate that css uses a sprite, which could very well be created using a compass or something similar. It is also important to see the source code before making harsh judgments about quality.

Answer 4

If you're particularly interested in the last 5 lines, the discussion of class vs id is not the point here.

The fifth line and lines 7-11 (last five) refer to the sprite. (I'm sure you know that.) Using six lines to indicate five different images is just as effective as you are.

In addition, sprites usually use classes because the image will be deployed in different places.

The question of CSS performance for these lines is the need for a full link.

UPDATE: This Google document is invaluable because it explains how the browser uses CSS parsing. As a result, he qualifies some of what I wrote below. The browser works from right to left for each selector, so it will never parse the page section . The problem is only loading time.

#page section .s_1 menu li.b_5 a can also be .b_5 a if this is the only context the sprite uses. I would also put the class in <a> myself, and you could just refer to the button class as .b_5 . A better className would not get lost, or IMO; the extra five characters in button_5 not going to kill anyone :)

In general, you will almost certainly lose the #page section without losing accuracy and gaining performance. Using menu also highly undesirable.

At least you can, without a doubt, cancel it until the following:

 * {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;} 

Personally, I think .b_1,.b_2,.b_3,.b_4,.b_5 better than .s_1 a . Also usually you do not need to have background-repeat:no-repeat; if you use a sprite and specify the height and width (if the width is greater than the sprite).

If you feel REALLY, you may lose the final ; to } too :)

Answer 5

If the page is smaller using an identifier, it can be understood. But imagine there are five lists on your page, and each of them has five list elements. Then you need to define a 5 * 5 identifier for use in css. It will be big text, and it will be bad syntax. Moreover, one element can take more than one class. Therefore, each class can be used many times (for example, inheritance in an object-oriented). This will also reduce the size of the css text and increase its readability.