Published in CSS on Saturday, May 15th, 2004
A discussion of methods used to organize and optimize your css files.
A lot of CSS posts here lately, a reflection of the stages we are at for a few of our projects.
Some of our recent work has seen us build some relatively complicated style-sheets, a reflection of shooting for full cross browser compatibility using only CSS and also using some of the design effects that are in vogue these days.
One thing we have noticed is that there appears to be somewhat of an inverse relationship between optimized CSS (example) and organized CSS (example).
How deeply you optimize can greatly hinder any necessary tweaks that arise in the future. By combining rules and eliminating comments you can reduce the file size, but this makes everything harder to manage in the future.
Here it becomes a case dependant decision - for static brochure style sites, keep a well commented spare around and then optimize to your hearts content: clean out spaces, comments and even combine similar rules.
With sites that require more frequent changes and management, you can keep a well commented version as a backup and simply clean out the comments and move all of your rules to a single line format, as in the 'optimized' example above (combining similar rules can become a bit of a headache on sites that require frequent management).
Perhaps the best of both worlds, well commented and optimized CSS, could best be acheived by using your scripting language together with your CSS.
Note: The "official line" on CSS compression here at fiftyfoureleven is being archived and updated here.
You could simply use HTTP compression on your CSS at the server (apache) or file level (php's gzip, for example). This greatly reduces the file size and has been found to be a functional solution. Your comments and properly indented CSS would be compressed to within an inch of its life by as much as 80% (your mileage may vary).
Going one step further, you could have your comments reside in your CSS document as PHP comments and use PHP to deliver your css, in the same manner that was described for gizpping your CSS. Then, you could comment as much as you please and not have to worry about having a commented version and an optimized version lying about.
Besides some of what we've had to deal with lately, this post was inspired by the excellent manner in which the CSS is organized for the recent redesign of Digital Web Magazine. The way that the CSS is broken into sheets by nature of it's functionality must make it easier to manage.
We're giving the PHP method outlined above a shot - if done right, management of one or even several stylesheets will be made easier by the ability to comment heavily without having to send those comments to the browser. Add in some compression and the whole system sounds pretty efficient.
As CSS techniques get improved and applied to bigger sites, file management is becoming increasingly important. What do you do to organize and optimize your CSS files?
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
This is more relevant to your earlier article on gzipping CSS through PHP, but since your comments are closed... ;)
I've trying out easier ways of letting PHP handle CSS for gzipping, that don't involve cluttering the CSS file with PHP markup to turn on the output compression and set headers properly.
The following solution assumes you have Apache installed, but use an ISP that won't install mod_gzip. It also assumed you keep all of your CSS files in one css-specific directory.
All you need to do is place a .htaccess file in your CSS directory (I use /styles/) that contains the following lines:
AddHandler application/x-httpd-php .cssphp_flag zlib.output_compression Onphp_value default_mimetype "text/css"This last line is very important, as Mozilla is particular about mimetypes (and so it should be) and won't parse the CSS if it's sent as anything but text/css. Unfortunately, this last line is also why your CSS files will have to be in a directory on their own without any PHP files that should output as text/html.
Endnote: I usually place the
php_flag zlib.output_compression Online in a .htaccess file in the root directory.Caveat with the above method: This will only work for Apache servers running PHP as a module. If you're running PHP as a CGI, you won't be able to pass any configuration directives to PHP in .htaccess (because Apache will have no idea what
php_flagorphp_valuemean) and you'll get a 500 Internal Server Error if you try.I currently Organize. I should use something to optimize my css as well as my html.
Hey Alun, great idea, very clean, though there appears to be one setback...
When trying this out, I'm finding that unless I specifically include header information for caching the CSS file, it doesn't cache.
This is fine for me, as we are going to be including PHP info in the CSS file, with the goal of reducing comments; I can include the appropriate header information that way. However if you wanted a 'no PHP in my CSS' solution, and you care about caching, this will have to be resolved...
Interesting, Mike. Does this occur in every browser you try? Does this no-caching still happen with CSS files passed through PHP, if
zlib.output_compressionis off? Could you do a dump of what headers your host is sending when a gzipped css file is requested?It could be that PHP is sneaking in some default no-cache headers when it shouldn't be, or it could be that the browser(s) by default will not try and cache a gzipped CSS file.
Editor's note: Answers to Alun's questions have been addressed here
What we would got in benefit, doing optimization of CSS file? Reducing from 50Kb to near to 25Kb -- per user session? Gain equals to a size of one not-so-big JPEG image for entire browsing session.
I`ve found appropriate to provide some backstage ripping, caching & gzipping for CSS, but benefit-tradeoff ratio seems to be poor even in this case.
Not quite sure about what you\'re saying Kuso. Looking here you\'ll see that the benefit has been 75-80%, not 50%. So for your 50kb file that\'s, conservatively, a 35kb savings.
For me that\'s worth it.
I have Norton firewall on my system. When the wall is up, it blocks sending of the \'accept-encoding\' header, so that I can\'t receive gzipped content. One of our clients sites has roughly 25k in CSS, and I can notice a difference over a 128kb/s line when browsing that site (granted the whole site is compressed).