My Thoughts on CSS Optimization

After using a CSS optimizer a couple of days ago, I realized that if you write your CSS properly, you should never need a CSS optimizer. Here’s why: when a CSS optimizer runs, it groups all the selectors together that share common styles and rules. For example, if you have

margin: 0;
padding: 0;

on 50 different selectors, it’s going to group them all together. Which means in most cases, it will repeat that pattern for all the different styles that you’ve applied throughout the stylesheet. So if you’ve got list-style: none on 16 different selectors, it’s going to relist all those selectors again just to add that one style. Below is an example of the CSS I tried to optimize for my new design, only to have the optimizer add 2kb and say “sorry ” when it was done.

Here’s what it looked like after I optimized:

 body,fieldset,#header #nav li,#bottom-header #nav,#bottom-header #nav li a,#main,#sidebar-one.column .search-form fieldset,#sidebar-one.column .search-form,#sidebar-one.column ul li,#sidebar-one.column ul,#sidebar-one.column ul#switcher li,#sidebar-one.column ul#switcher,#footer #lastfm,#footer #lastfm ol li,#footer #lastfm ol,#footer #archives ul li,#footer #archives ul,#footer #copyright ul li,#footer #copyright ul{margin:0}body,fieldset,#header #nav li,#bottom-header #nav,#bottom-header #nav,#maincontent .date small,#maincontent .date strong,#sidebar-one.column .search-form fieldset,#sidebar-one.column .search-form,#sidebar-one.column .outer,#sidebar-one.column ul li,#sidebar-one.column ul,#sidebar-one.column ul#switcher li,#sidebar-one.column ul#switcher,#comments dd,#footer #lastfm ol li,#footer #lastfm ol,#footer #archives ul li,#footer #archives ul,#footer #copyright ul li,#footer #copyright ul{padding:0}

As you can see, that’s a lot of CSS for setting two values, margin:0 and padding:0.

CSS optimization can be good, but only if you write terrible CSS or repeat the same styles over and over again throughout your stylesheet. Now that’s not to say you shouldn’t minify and/or compress your CSS. That’s something that doesn’t change the order and values of the CSS, but makes it more compact when delivered to the user’s browser.