CSS Tip #3: How do minimize my CSS filesize?

I was getting tired of inserting:

p { background-color:transparent; color:#000000 }
h1 { background-color:transparent; color:#000000;
     font-weight:bold; padding:5px }
span.spanBold { background-color:transparent;
                color:#000000; font-weight:bold }

for each class or selector sharing this value. I did this so often for different selectors and classes that one day I decided to save myself the trouble and just assign popular values (like the ones above) on their own line and just append each selector or class (separated by a comma) to this line, like:

p,span.spanBold,h1 { background-color:transparent }
h1,span.spanBold { font-weight:bold }
p,span.spanBold,h1 { color:#000000 }
h1 { padding:5px }

I was pleasantly surprised that my 'laziness' resulted in my CSS filesize dropping to 4KB from 5KB. That's 20% savings! *SIGH* If only I knew how to do this with my expenses...


Do you find it easy to navigate through this site?



 Where am I?