This is the second part of a five part article. Read part 1 CSS Optimizations
CSS is also ripe for simple optimizations. In fact, most CSS created today tends to compress much harder than (X)HTML. The following techniques are all safe, except for the final one, the complexities of which demonstrate the extent to which client-side Web technologies can be intertwined.
6. Remove CSS white space
As is the case with (X)HTML, CSS is not terribly sensitive to white space, and thus its removal is a good way to significantly reduce the size of both CSS files and <style> blocks.
7. Remove CSS comments
Just like markup comments, CSS comments should be removed, as they provide no value to the typical end user. However, a CSS masking comment in a <style> tag probably should not be removed if you are concerned about down-level browsers.
8. Remap colors in CSS to their smallest forms
As in HTML, CSS colors can be remapped from word to hex format. However, the advantage gained by doing this in CSS is slightly greater. The main reason for this is that CSS supports three-hex color values like #fff for white.
9. Combine, reduce, and remove CSS rules
CSS rules like font-size, font-weight, and so on can often be expressed in a shorthand notation using the single property font. When employed properly, this technique allows you to take something like
p {font-size: 36pt;
font-family: Arial;
line-height: 48pt;
font-weight: bold;}
and rewrite it as
p{font:bold 36pt/48pt Arial;}
You also may find that some rules in style sheets can be significantly reduced or even completely eliminated if inheritance is used properly. So far, there are no automatic rule-reduction tools available, so CSS wizards will have to hand-tweak for these extra savings. However, the upcoming 2.0 release of the w3compiler will include this feature.
10. Rename class and id values
The most dangerous optimization that can be performed on CSS is to rename class or id values. Consider a rule like
.superSpecial {color: red; font-size: 36pt;}
It might seem appropriate to rename the class to sS. You might also take an id rule like
#firstParagraph {background-color: yellow;}
and use #fp in place of #firstParagraph, changing the appropriate id values throughout the document. Of course, in doing this you start to run into the problem of markup-style-script dependency: If a tag has an id value, it is possible that this value is used not only for a style sheet, but also as a script reference, or even as a link destination. If you modify this value, you need to make very sure that you modify all related script and link references as well. These may even be located in other files, so be careful.
Changing class values is not quite as dangerous, since experience shows that most JavaScript developers tend not to manipulate class values as often as they do id values. However, class name reduction ultimately suffers from the same problem as id reduction, so again, be careful.
Note: You should probably never remap name attributes, particularly on form fields, since these values are also operated on by server-side programs that would have to be altered as well. Though not impossible, calculating such dependencies would be difficult in many Web site environments.
To be continued...
*Originally published at port80software.com
Developing Your Site For Performance : Markup/CSS Optimization
0 views
Comments (0)
Please sign in to leave a comment.
No comments yet. Be the first to comment!