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:


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{
	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

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.

DeliciousStumbleUpon RedditSubscribe

Comments (8 Comments)

  1. Vladimir Carrer
    December 1, 2008

    Great article. I particularly like your minimalistic and effective CSS comments /* // original */ . I hate when some people talk about CSS optimization and thay have something like /* ****million dots **** */ , what a waste of space.
  2. Andy Gongea
    December 1, 2008

    Hmmm ... so you didn't like my article about Optimizing and Compressing CSS. :P
  3. divitodesign
    December 1, 2008

    Hehe great you like my article! Good luck with tempaltica, too! :)
  4. Web Development Community
    December 3, 2008

    you're been voted! Track back from
  5. Shreemani
    December 4, 2008

    Now a days I'm also more into optimization, and web standards too. I like the website My fav for css optimization.
  6. Dainis Graveris
    December 6, 2008

    great article and clean code! very nice!
  7. rohnn
    December 11, 2008

    The main problem is not usually the CSS itself but the HTML code with the numerous unnecessary tags used within the pages as well as very often very poorly optimised images. Optimising images and using clean html code save much more bandwidth than what can be achieved with "compressing" CSS. Still, don't get me wrong, I am not saying it is not useful and/or important.
  8. Mathew
    January 6, 2009

    I personally don't believe in CSS optimization (or even JS for that matter). After doing a few tests myself I noticed that the bottleneck of website performance nowadays is the amount of files you include in your webpage. A computer needs more time to load several small files then loading 1 bigger file. If you use server side includes for your CSS and JS, the page's source code could become gigantic, but it still would load faster...

Sorry, the comment form is closed at this time.