Chris Wallace wants to be RSS friends with you.
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.
I agree with you with CSS minification. Minification does two things: shrinks your CSS file and obfuscates your code. The former is great, especially for complex, high-traffic sites – but as a front-end developer, you want to showcase your CSS knowledge when the user views source, and minifying will make it hard to do (not everyone uses Web Developer or Firebug to view source).
If you use a CSS reset (like Eric Meyer’s to remove margin and padding on all elements in the first place, you won’t need to go to these lengths.
For simple sites my CSS is simple enough that resets are not needed, but I can definitely see the use for large web apps.
Also forgot to note that a lot of times I actually enjoy letting the browser-driven styles do the work for me
I use a variation of Eric Meyer’s reset file. Deciding to use a css reset file was one of the best decisions I’ve ever made. If you enjoy having default styles, then using a reset file in combination with a small list of default styles would create default styles that would eliminate the excess work of recreate styles from the ground up for all elements.
True. Maybe I’ll start adding that to my standard process. I guess I’m just old-fashioned.
Since posting my last comment here, I have been looking into blueprint as a way to get the best of both worlds with minimal work. I haven’t gotten too far into blueprint, but it looks like a great way to reset and get default styling.
Quick Evaluation: Blueprint css framework
Funny you mention Blueprint, I am writing a post right now reviewing the various CSS frameworks out there. Blueprint is one that looks interesting, for sure.
It is OK to use a CSS compressor but only in production when you’re done with editing the CSS file.
That’s pretty freaking genius dude!!
[...] My Thoughts on CSS Optimization – Should you compress your CSS? [...]
I am grateful for posts like these that clearly demonstrate some web design knowledge that’d I’d otherwise have to figure out myself. Although I do enjoy figuring it out as well.
[...] get rid of some of the montonous css definitions that go with redefining a general style. After I commented on Chris Wallace’s post on CSS optimzation, I wanted an easy way to rescue some of the [...]