10 Tips For A Smaller CSS File

Wednesday, September 5th, 2007

Categories: Web Development

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

Not only will these tips help reduce the file size of your CSS file, but they’ll also speed up your coding if you prefer to do some of your CSS by hand.

Alot of the changes I mention, individually, will reduce your CSS’s file size by tiny minimal amounts. However, all of these changes start to add up. Those kilobytes that you save start to add up if you have long CSS files, numerous CSS files and/or high traffic to your website. A 10kb difference in file size could be deal-maker that keeps your site from going down it’s Dugg (using Digg.com).

CSS File Size Basics

The biggest thing we’re doing here, is making an effort to reducing the actual number of characters in your CSS file. The more characters, the bigger the file size. It’s pretty straight-forward, CSS file’s aren’t anything magical, they’re relatively close in family to a .txt file.

10 – Reduce The Number of Line Breaks

A Line break is a character. If you have no problem orienting yourself in a CSS file (it helps if you’re using an application that color codes your file), ease up on creating so many spaces and line breaks in your CSS file. For example:

#myDivExample {
color:#f93fa9;
font-size:14px;
text-align:left;
}

Does exactly as the single line of code:

#myDivExample{color:#f93fa9;font-size:14px;text-align:left;}

9 – Avoid Frivolous Comments

Comments are characters too. Use comments sparingly, write only as much as you need to be oriented the next time you open your CSS file. Here’s an example of a frivolous comment:

/***************************/
/*********My Subnav********/
/***************************/

Here’s an example of small comment that gets to the point without bloating your CSS file:

/*My Subnav*/

8 – Simple Colors Can Be Expressed In 3 Characters

Simple colors where the 1st & 2nd, 3rd & 4th and 5th & 6th are identical can be expressed in 3 Characters. For example:

#ffffff becomes #fff
#ff0000becomes #f00
#113399 becomes #139
#940f13 cannot be simplified

7 – You Can Leave Out “px”

Using “px” to specify pixels can be left out if the amount is specified as 0. Zero pixels is the same as zero em which is the same as zero pt. That’s why units don’t need to be specified. This means:

#myDivContainer {padding-left:0px;}
becomes
#myDivContainer{padding-left:0;}

6 – Code Margin And Padding In One Line of CSS

Some code, Dreamweaver chooses to do the long way, unfortunately, some people learn from the Dreamweaver example and it could end up costing them hours of their time if they have to fix a problem manually or if they have to hand code.

#myDivContainer {
padding-left:0;
padding-right:0;
padding-top:10px;
padding-bottom:30px;
}

becomes
#myDivContainer {
padding: 10px 0 30px 0;
}

Please note that padding and margin function exactly the same way (in CSS). The first value is the top, then comes right, then bottom and then left. If you have the same values for top & bottom, in addition to right and left:

#myDivContainer {
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
}

becomes
#myDivContainer {
margin: 0 auto;
}

In the result, if you specify two values, the first value specifies the top and bottom, the second value specifies the left and right.

5 – Code Background In One Line of CSS

You can simplify all your background attributes (background-position, background-repeat, etc.) into a single line in CSS.

myDivContainer {
background-image:url("myBackground.jpg");
background-repeat:repeat-y;
background-position:top center;
}

becomes
myDivContainer {
background:url("myBackground.jpg") top center repeat-y;
}

4 – Code Font In One Line of CSS

You can simplify some of your font attributes (font-family, font-size, line-height) onto a single line in CSS.

myDivContainer {
font-family: arial, sans-serif;
font-size:12px;
line-height:16px;
}

becomes
myDivContainer {
font: 12px/16px arial,sans-serif;
}

3 – Code Borders In One Line of CSS

You can simplify your border attributes onto one line (border-width, border-style, border-color) onto a single line in CSS.

myDivContainer {
border-width:1px;
border-style:solid;
border-color:#123456;
}

becomes
myDivContainer {
border: 1px solid #123456;
}

Please note that a similar style exists when specifying single sides to add a border to:

myDivContainer {
border-left-width:1px;
border-left-style:solid;
border-left-color:#123456;
}

becomes
myDivContainer {
border-left: 1px solid #123456;
}

2 – Clean Up Your CSS

This is an often overlooked tip. If you’ve stopped using a specific CSS element on your website, take it off, why should your visitors have to download it? If it’s critical for you to keep a backup, that’s what having a copy of your website on your computer does.

1 – Use PHP To Compress Your CSS

Another great tip. Using PHP, you can use it to fetch your CSS file, and compress it (eliminate unnecessary characters) before your viewers download it. The code and instructions used are found at Marco van Hylckama Vlieg’s page on compressing CSS.

If you’re lazy, what you can do is download the PHP file that I cleaned up. Unzip that file to the same directory as your CSS stylesheet on your web server and replace the link in your HTML file from YourCSSFileName.css to css.php?file=YourCSSFileName.css. It’s as simple as that.

Difference In Size For My CSS File

I followed all these steps myself. Although I didn’t start off with a huge CSS file, I did manage to bring my 12kb CSS file to a 7kb CSS file. Not a big difference (5kb isn’t a lot), but like I mentionned earlier, if you have a 25kb CSS file, and you’re getting alot of pageviews and your visitors have slower connections, you and your visitors just might notice a difference.

Hope that helps. :)

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS

Error. Page cannot be displayed. Please contact your service provider for more details. (18)



Related Posts


Subscribe to this Post

21 Responses to “10 Tips For A Smaller CSS File”

  1. UCAR Job Blog » Blog Archive » New Menu Says:

    [...] CSS Cleanup, I fixed all of the extra spacing but lots of code revamping needed [...]

  2. UCAR Job Blog » Blog Archive » Styling Says:

    [...] went through the style sheets and cleaned up subpage_layout and homepage_layout as per a blog post I found. I applied these concepts to all 4 sites and reduced the size of the css files. I also [...]

  3. Marco Says:

    <p>Hi, thanks for the credits! Not sure what you mean by ‘cleaned up’ though when it comes to my php snippet? ;) </p>
    <p>By the way, if you’re on WordPress you should use my WP-CSS-Streamliner plugin which does merging of multiple files and compressing fully automatically for you. If you have a WordPress with many different CSS files inserted by plugins it will give you a massive speed gain.</p>

  4. Css Over Load « Says:

    [...] http://www.pat-burt.com/web-development/10-tips-for-a-smaller-css-file [...]

  5. Dwayne Charrington Says:

    These are some pretty great tips. Awesome article. Hopefully some people will take heed of these and start making their slow websites that extra bit optimised. I am guilty of excessive and unnecessary spacing and comments.

    - Dwayne.

  6. This Weeks Top 5 Links | devjargon Says:

    [...] 10 Tips For A Smaller CSS File If you’re site is getting a lot of traffic, you’ll want to save file size any where you can. Your CSS file is one spot where you can save a few kB in the hope that it’ll speed up your site. Here are 10 tips to make your CSS file small and hopefully speed up your site. [...]

  7. Warren Says:

    Great tips. I was looking for info for my CSS file which is 7kb in size. I’ve been searching around for an article like this so I can compare my css file to it. I’ve always been worried about making a css file too big, now I know that I can go twice as big if I needed to. I bet I can get my 7kb down to 5kb or 4kb using these tips.

  8. mjcpk Says:

    Whilst I agree with using the short-hand versions of font, border etc I think that suggestions 9 and 10 aren’t much use. It is far better to lay out your CSS files in a way that makes sense to you; in a way that makes it easy to work with when you next need to. You should then minify the file before uploading it to the server.

    When the file is minified ( look online for CSS minifiers ) unnecessary characters are remove. This includes newlines and comments and any extra tabs or spaces. This way you have a small file on the server and a clear and easy to use one on your computer.

    Also, It is probably better to use the web servers own tools for compression rather than using a php script. Not all web browsers can handle compressed files and the web server will only server up compressed files if asked to by the browser. If you don’t want to use this method ( or can’t ) then you may as well put the compressed file on the server rather than force the server to compress it every time it serves it using a php script.

  9. Sam Says:

    Thank you for this :) Excellent little tutorial.

  10. Nic Says:

    Definitely all things I’ve come to learn in time… wish I saw this article a while ago. Why use PHP to compress files though? You’re still adding extraneous load… why not just compress your CSS before posting to production?

  11. Patrick Burt Says:

    @Nic
    It can start to become frustrating to uncompress/recompress. Imagine trying to edit this: http://www.pat-burt.com/wp-content/themes/default/css.php?file=style.css

  12. Nic Says:

    Well, you wouldn’t edit that. :)

    Instead- you keep am uncompressed version, but before you push it to a live site you compress it. I guess it’s just preference- it’s a trade off between a minuscule amount of manual labor vs a minuscule amount of machine labor.

  13. CSS vs Tables « Chandrika Guntur Says:

    [...] of bandwidth used. So, using CSS layouts helps lower those costs especially if it is a large site. Patrick Burt has some good suggestions to reduce file sizes with [...]

  14. Beta Says:

    I want to use smaller CSS metode. Thanks

  15. How I sped up my WordPress blog « WordPress Hacks Says:

    [...] 10 Tips For A Smaller CSS File for specific examples of how you can shrink your CSS [...]

  16. Mark Says:

    Great tips. I think the main one is in getting rid of redundant css for styles you no longer use.

    A good way to find where you might still be using these styles without realising it is to get Notepad ++ to search your site for the style name. You can then change these globally to a more up-to-date style.

  17. JeLBee Says:

    The css tool is much easier to use. Just copy and paste it and viola the css is compressed.

  18. 15 Ways to Optimize CSS and Reduce CSS File Size - blog.topwebdevelop.com Says:

    [...] Pat-burt – 10 Tips for a smaller CSS File Tags: CSS [...]

  19. CSS vs Tables | GCS Design Says:

    [...] of bandwidth used. So, using CSS layouts helps lower those costs especially if it is a large site. Patrick Burt has some good suggestions to reduce file sizes with [...]

  20. PAT Testing Says:

    A great article. I’ve been struggling to reduce the amount of unused css on my site, and I agree that a few ‘k’ saved here and there really does make a difference to the site’s performance. I like the idea of putting lots of attributes on one line, and will refer back to this page constantly.

  21. Tim James Says:

    It would be good if there were automatic tools to do this for us!