Cleaning Up Your CSS
In a recent discussion over at OWD a new designer was wondering what they could do to clean up some of their style sheet and site code.
I offered a few suggestions on how to optimize the style sheet, which in the grand scheme of things can help increase load times for your site and make the style sheet easier to read.
One of the examples was to change color codes to be optimized. An example would be to change #000000 which is black to #000 which as you can see reduces the code size from 7 characters to 4 and if you do this through out your entire style sheet for the color black, it will reduce the overall file size of your style sheet. There are other colors you can do this with as well.
Another example would be #ffffff which is white. Change it to #fff and you just reduced your overall file size.
Changing color codes won’t make a huge change in load times but if you can shave a few KB of code here or there, over time it will help your site load times.
Something else to do is remove the tab spaces before your code. A lot of people like to have 5 spaces or a tab before each line of code. Having so much white space also increases file sizes.
A good tool I use to check and clean up my css on sites is a SourceForge.net project called CSSTidy.
What’s nice about this tool is the site also offers an online version if you don’t want to install it locally.
I hope this information was useful to you and if you have anything to add, be sure to comment or better yet, join www.attackr.com and submit some articles yourself. Between everyone who contributes to the site, we can help each other out become better designers and coders making the internet a better place for all to see.
Cheers,
-Sean
Download Design
August 27th, 2006 at 1:31 pm
I never knew about the online version of the .css checker, thanks for that information
August 27th, 2006 at 2:30 pm
Glad to have helped Christopher. That’s one of the ideas with the site, to help designers. Be sure to keep coming back and feel free to submit articles as well.
August 29th, 2006 at 2:27 am
CSSTidy is a great tool but not so good if you want to edit your CSS in the future as the output is stripped of comments and sometimes logical flow.
I would suggest that you make a copy of your style sheet and call it “master.css” (or whatever) then keep that as your human readable style sheet with your comments etc. You can then edit your user friendly master file and run it back through CSSTidy after the edits
Good site!
August 29th, 2006 at 9:10 am
Hi Ainslie. CSSTidy was recently updated so you can select an option to leave your css comments. They’ve also added other options as well, so you should give it another look.
September 9th, 2006 at 10:58 am
Wow! Great find. It did a great job of cleaning up my CSS file.
Another great CSS tool I’ve been using is StyleMaster from http://www.westciv.com.
Thanks!
September 9th, 2006 at 11:05 am
Hi Doug. Glad it helped you. That’s the idea with http://www.attackr.com is to provide help to others in the design community.
We’re always looking for new information to provide to our readers, so feel free to submit an article for the site as you seem like someone in the know.