Compressing CSS - any CSS experts out there? - GoFuckYourself.com

crazytrini85 · 07-20-2010, 01:58 AM

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/

Highest Def · 07-20-2010, 02:33 AM

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

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.

BestXXXPorn · 07-20-2010, 03:01 AM

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 ;)

crazytrini85 · 07-20-2010, 04:03 AM

Thanks. My head just exploded. :-)

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

fris · 07-20-2010, 04:32 AM

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

gimme-website · 07-20-2010, 05:45 AM

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

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

07-20-2010, 01:58 AM	#1
crazytrini85 Confirmed User Industry Role: Join Date: Jun 2006 Location: Over there. Posts: 817	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/ __________________ These are my top converting sponsors.

07-20-2010, 02:33 AM	#2
Highest Def In the Cave of Gold Industry Role: Join Date: Jun 2010 Location: ONLINE Posts: 660	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 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. __________________

07-20-2010, 03:01 AM	#3
BestXXXPorn Confirmed User Join Date: Jun 2009 Location: Asheville, NC Posts: 2,277	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 ;) __________________ ICQ: 258-202-811 \| Email: eric{at}bestxxxporn.com Last edited by BestXXXPorn; 07-20-2010 at 03:03 AM..

07-20-2010, 04:03 AM	#4
crazytrini85 Confirmed User Industry Role: Join Date: Jun 2006 Location: Over there. Posts: 817	Thanks. My head just exploded. :-) I'll spend some time on this then and see what I can come up with. __________________ These are my top converting sponsors.

07-20-2010, 04:32 AM	#5
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,359	make sure to keep a copy of your original if you minify it so you can edit later __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

07-20-2010, 05:45 AM	#6
gimme-website Confirmed User Industry Role: Join Date: Jun 2008 Location: Finland Posts: 1,588	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 So if you're lucky enough to have a commented CSS file, keep a copy of it __________________ www.gimme-website.com