CSS: Optimizing CSS Size. 8 Ways

As I commented about JS Code in this article, a very good idea to optimize your site is reducing the size of your code. Now is time for CSS. Which tools and tips do we have to reduce the size of the CSS????. Of course try to host your site in a provider which enables HTTP Compression!!. That will help in general with all your code. Which are our tools??:

1. Since long, long time ago CSS Drive has been helping Web Masters to compress the size of css. you can choose from erasing all the comments or comments which exceed a size, concat all the characters in CSS, erasing just white spaces.....



2. CSS SuperScrub by iSnoop will reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names. A very usefull tool, although we should help iSnoop to make a better marketing campaign to sell its product!! ;)



3. If you like to get a readable CSS file then use Factor CSS. Easy and actually you can get same results with CSS Superscrub.



4. Combine all the css files to one!!. ..when possible of course. When a user is opening your website every object on the page (e.g. images or scripts) will require a round trip to the server. And any access, or HTTP Request to the server takes time!! and so on will delay the response. If you are loading dozens of objects this delay can add up to several seconds.



5. Put CSS file in the header/top. I know you already do it..., but in case you don't I would recommend Nike slogan: Just do it!!!



6. I know sometimes is hard if you are a programmer... but group all up, right, down, left properties together!!!. If firebug does it, you can also do it!!. Imagine how much size you earn from:
   

   
    margin-top:1em;
    margin-right:2em;
    margin-bottom:3em;
    margin-left:4em;
   

   to:

     margin:1em 2em 3em 4em;




7. Are you able to group all your styles together?? My question is not darish at all, but just it is helpfull for you or not. If you have 3 same styles:
   

    h2 <margin: 10em 10em>
    #style1 .title1 <margin: 10em 10em>
    #style1 .title1 <margin: 10em 10em>

   group them to
   

    h2, #style1 .title1, #style1 .title1  <margin: 10em 10em>

   but rememberyouwill need to ungroup them if they change seperatly!!.



8. Trying to get to Perfection??. Remove last semicolon at styles:
   from

     <margin:1px 2px 3px 4px;>

   to

     <margin:1px 2px 3px 4px>

   
   by default measure is px so you can reduce size writing

     <margin:1 2 3 4>

   
   

Create now optimized CSS files!!. You can use same keyboradas OMD!!, ..do you remember this?? :)