Compressing CSS - any CSS experts out there?
 

I came across a tool that will compress your CSS file. Never heard of this before. A normal compression reduces the size (of my file) by 16% with the one I tested it with.

Not being a CSS expert, I have to ask those who are, is this safe to do or a good idea?

This is the site: http://www.cssdrive.com/index.php/main/csscompressor/

It's safe but unless your css file is huge, and your traffic is huge, kind of pointless. You're talking about compressing a 5kb file down to 4kb which I guess could make a difference if you have 2 million uniques a day :winkwink:

The drawback is that it strips all the white space and makes it difficult to edit in the future by making it difficult to read.

Absolutely you should minify your css files... I would recommend creating a deployment script that does this for you whenever you deploy site changes.

I use one which minifies all JS and CSS and then gzips everything. I then serve the minified and compressed files so the web server doesn't have to handle compression on every request...

What I've done, personally, is simply add "z" to the end of the file that way both the unminified/uncompressed version and the min/compressed versions reside on the server. Your templates can then have something similar to:


<link rel="stylesheet" href="/styles/common.css<? if (!$dev) echo 'z'; ?>?r=1234" type="text/css">

So your development deployments will use the standard .css file and production boxes will serve up the .cssz (minified and compressed) version...

The r=1234 tacked onto the end there is for versioning... that way if you need to roll additional CSS changes and want to make sure that all users browsing the site update to the new CSS file immediately on the next request, you can just increment the revision number ;)

Thanks. My head just exploded. :-)

I'll spend some time on this then and see what I can come up with.

make sure to keep a copy of your original if you minify it so you can edit later

From a designers point of view - compress if you really need to, but as Fris said, keep a copy of the original if there's a chance that you or somebody else is going to make any edits later on.

If I receive a compressed CSS file, I just quickly re-format it with an online tool such as http://www.lonniebest.com/FormatCSS/, so removing spaces etc. isn't a problem but it's a real pain when you have a massive CSS file and absolutely no comments :Oh crap

So if you're lucky enough to have a commented CSS file, keep a copy of it :winkwink: