10 Tips For A Smaller CSS File

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.

Columbia, MD Homeowner Insurance - Free Quotes

Related Posts

• 10 Web Development Tips Part 1
• Optimizing JPEGs (JPGs) – Get The Most Out Of Your Kilobytes
• 10 Web Development Tips Part 2