CSS Combine

Sep
2
2010

This simple little php script (less than 50 lines!) takes a list of your css files that you use on every page of your design, combines them and minifies them. This accomplishes 2 things: it cuts your http requests for css files to 1 and it cuts the size of the request considerably.

I made this because I like to split my css functionality between multiple sheets. At the very least I’ll always have my reset.css and my global.css, I also generally have a separate sheet for forms. There’s also style sheets that come with various JavaScript plugins, with CSS Combine you can still keep those styles separate from your core styles.

I’m using CSS Combine on the blog template, if you look in my code you’ll see I’m only calling one style sheet, even though there are actually 4 needed for the full style- including 1 sheet for the jQuery plugin fancybox. Together those sheets amount to 16.5 kb, but with CSS Combine they come in at 9.8kb!

Now you can keep your css organized and readable, without that guilty, unoptimized feeling! And hey, if you wanna take your optimization to the extreme, you can call your one super css file 0.css.

  1. Download it
  2. add the line to your htaccess
  3. add your css files you wanna combine
  4. specify your css directory
  5. rock out.

Download from Google Code