posted on:December 1, 2008
Optimized Css Files
An article recently submitted to community news section reminded me of a topic that I wanted to talk about – CSS optimization. As you know there are many online CSS optimizers that help you reduce your CSS file sizes. But to me, solid, optimized code should be human generated.
What is CSS optimization
CSS optimization means removing the unnecessary and redundant parts of your code with the goal of reducing file size. Why is that important? Well, reduced file size means reduced download time. If you want your page to load quickly you will have to optimize. Also, if your site has huge traffic, the difference between 10 and 20 kb on each page view means a lot when it comes to your bandwidth.
As mentioned, CSS optimization can be done using some of the CSS online optimizers or it can be done by hand. Most common optimizing actions are removing line breaks, empty spaces and deleting comments. Other, more important actions you can take is taking really good care of your code in terms of using shorthand properties, smart class naming, using general styles and smart use of CSS selectors.
Optimization and Readability
If you are optimizing to the max, at the end you’ll get one line of CSS. That is as far as you can go, but do you really want to go there? Having all of your properties written in a single line makes the code very hard to read and extremely difficult to maintain. Imagine how much time would you spend restyling i.e. comment section of the site if you have to dig into one line CSS, even if you wrote it. So if you really need your CSS optimized to this level, you must have a working version of your file. As with everything in life you have to settle somewhere in the middle. Optimized CSS – yes, but readable – you bet!
How do I write my code
Since I don’t deal with heavy traffic I am not that preoccupied with few extra KB’s. You can take a look at my typical CSS file that I wrote for my new Css template store. It has 15.583 KB and I am ok with it. Optimized to the max it has little over 10 KB. Since I am constantly updating the site, I need to have highly readable and maintainable code. I will keep my code structure, indents and comments because it’ll help me find my way around it faster. Is this file optimized? If you look how many (unnecessary) white space, comments and line breaks it has than the answer is NO. But if you analyze the code (not the white space) you will see that the code could hardly be written with fewer lines. Shorthand properties, inheritance, general styles… it’s all there. (The one habit that I have that could be optimized some more is resetting margins and paddings for UL’s and then repeating margin or padding properties further in the code).
Let me give you just one real life example of how to avoid redundancy and save many lines of code. This is something I use for image replacement. To replace element with image you’ll need a large chunk of code. I use general style:
.graphic{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
As I develop my site and run into more elements that I want to be replaced with images, I simply add the selectors to that “general style” that I already coded. I end up with this:
.graphic, #header h1, #header li, ul#nav li, p#join, #price, #individual, #intro span, #subscribe, button, #preview h1, #preview span{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
For the specific element I don’t have to define all the properties. I need to define specific stuff like this:
#preview h1{
width:233px;
height:69px;
background:url(../images/bg_logo_preview.gif) no-repeat 0 0;
}
So the optimization starts the minute you start coding. My beliefs are that the best way to optimize your CSS is to learn to write it properly and constantly improving your techniques. You can remove all the spaces and comments you want, but if you keep defining font family for each element on the site, you are doing it wrong to begin with.
Here are some of the links that you may find interesting:
Optimize your CSS files to improve code readability
Efficient CSS with shorthand properties
Improving Code Readability With CSS Styleguides
How To: Optimize Your CSS Even More
(Some) Online Css Optimizers
http://floele.flyspray.org/csstidy//css_optimiser.php
http://www.cssoptimiser.com/
http://flumpcakes.co.uk/css/optimiser/
http://mabblog.com/cssoptimizer/compress.html
Share your CSS optimizing link with us by posting comments here.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe
Comments (8 Comments)
Sorry, the comment form is closed at this time.
Vladimir Carrer
December 1, 2008
Andy Gongea
December 1, 2008
divitodesign
December 1, 2008
Web Development Community
December 3, 2008
Shreemani
December 4, 2008
Dainis Graveris
December 6, 2008
rohnn
December 11, 2008
Mathew
January 6, 2009