Pre-Processing & caching your CSS

Leevi Graham—4th June, 2008  |  2 Comments

By now you all should be serving up your JavaScript libraries from Google, that is unless you have some kind of corporate restrictions; so lets move onto CSS.

Shaun Inman (the genius) has followed up his earlier development efforts on CSS Constants and CSS Server Side Processor with a new script called CSS Cacheer.

CSS Cacher basically takes your CSS and runs it through a bunch of processing plugins, caches the result and then serves up the file with the correct encoding to the browser. The CSS Cacher code is super simple to setup and requires little PHP knowledge, that is unless you want to start writing your own plugins.

To get you started immediatley, the script is bundled with a couple of very handy plugins:

1. Base64: Encode your images as text inside your CSS files (reduces server requests)
2. BasedOn: Create CSS group rules to use throughout your stylesheets
3. Condenser: Removes comments and whitespace before and after rules
4. NestedSelectors: Nest selectors rather than retyping the parent elements
5. Pretty: Opposite of condenser. Adds tabs and line breaks to your CSS
6. ServerImport: Combine multiple stylesheets into one
7. Constants: Define CSS constants to use in your stylesheets

I have a feeling that the bundled plugins (some more useful than others) are just the tip of the iceberg. I have even heard rumours that a grid plugin is in development so keep posted.

After using all of the previous incarnations of Shaun's CSS processing and caching scripts, I always felt that they were missing some features. Thankfully this release addresses all my previous issues and is the best by far.

I'll be using CSS Cacheer to combine all the stylesheets we work with at Newism, which based on my experience, will speed up our development processes quite a bit.