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
