9 Tips to Smaller & Optimized CSS Files
Written by Stefan Vervoort on November 30, 2008Because CSS files are loaded from inside the <head> tags, every visitor download these files. We optimize images and PHP files, but CSS files are often overlooked. We should though and that’s what we will do today.
We can use CSS optimizers to make your CSS file smaller and that works great. However, I feel that if you use any of these tips WHILE you are writing CSS codes, your productivity and skill will improve.
Optimizing your CSS file is also necessary to save bandwidth and to have a good loading time of your page.
Tips for optimizing your CSS writing style
1. Comments
Comments are especially helpful when writing CSS and your fellow workers need to understand what you are coding. There are different ways of how to add comments though. You can use this:
/*-------------------*/ /*-----Comment-------*/ /*-------------------*/
While you can use this too:
/*Comment*/
That saves, say 20 characters. Say we have 15 pieces of CSS comments, that saves 300 characters!
2. Color Prefixes
Color prefixes are defined in HEX codes. The HEX codes are 6 characters long, but in some cases, you can use 3 chars to define the same colors. Take a look at the example:
div{ color: #ffffff; } /* Shortcode: color:#fff; */ div{ color: #ff88ff; } /* Shortcode: color:#f8f; */ div{ color: #f8f7f2; } /* No shortcode possible */
3. Combine Elements
For example, if you have a couple elements like h2, h3 and h4 and all of them have the same properties. They just differ in one point. You can do this:
h2, h3, h4{ padding:0 ; margin:0 ; color:#333; letter-spacing:.05em; word-spacing:0.1em; } h2{ font-size:1.2em; } h3{ font-size:1.1em; } h4{ font-size:1em; }
In this way, you have combined the elements and you have added an extra style declaration for the font-size property. This will save you lots of space when you get used to this.
4. Leave Out Px/Em/% When Value = Zero
The value zero (0) doesn’t require Px, Em or percentage. 0px is of course the same as 0em or 0%. So when you use the value 0 in your CSS layout (I guess you do!) than this trick will save you a couple chars every time.
div{ padding: 0px 5px 5px 10px; } /* Shortcode: padding: 0 5px 5px 10px; */
5. Combine Properties
Some properties as padding, margin and border have been split. For example, padding has padding-top, padding-right, padding-bottom and padding-left.
If the possibility exist, you should always combine these to one property because it make editing easier and it saves you space too.
div{ padding-left:0 ; padding-top:50px; padding-bottom:23px; padding-right:4px; } /* Shortcode: padding:50px 4px 23px 0; */
When the bottom/top values are the same and the left-right values as well, you can optimize it even more:
div{ padding-top:5px; padding-bottom:5px; padding-left:0 ; padding-right:0px; } /* Shortcode: padding:5px 0; */
6. Choose Classes/ID’s wisely
You should choose classes and ID’s that are short, easy to understand and descriptive.
Don’t choose something like “HeaderMiddleLeftCategories” if you can choose something like “h-cats“. That save you many chars along the way.
7. Save Space by Cleaning up your CSS file
When developing CSS websites you have idea’s that might or might not work. The idea’s that don’t work have been coded inside the CSS file, so they take up space and they are not necessary.
You should look through your CSS file for faults and unnecessary codes. This could save you lots of space.
8. Delete Semicolons on the Last Property of a Selector
One trick I found out via the use of a CSS compressor is that you have the possibility to delete the semicolon of the last property of a Selector. Take a look at this example:
body{ background:#ccc; color:#333; } /* Shortcode: color:#333 */
You see I deleted the latest semicolon? This isn’t a very large optimizing trick, but every char adds up to the sum. Say you have 50 selectors, you save 50 characters.
9. Delete Unnecessary Spaces & Enters
You might want to delete all the spaces and enters, as they are all count as one character. The problem with deleting these characters is that your CSS file loose structure and is less readable.
I usually don’t use this point when optimizing my CSS file because of structure is more important to me. An option to consider is that you save 2 different files, one without enters and spaces (and you use that file on your site), and you keep a copy with the enters and spaces so that editing is still easy to do.
Conclusion
If you want a CSS file fully optimized, I suggest you use a CSS compressor. You should teach yourself these tips, so you can write faster and code higher quality CSS.
Maybe you have other tips you use when optimizing your CSS file and I would love to hear them. You should add the tips to the comments!
This article is written by:
Name: Stefan Vervoort
URL: http://www.divitodesign.com
Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.
Loading ...
I agree with the principle of #6, but saving a few characters, IMO, is not worth less-than-clear class names (e.g., “h-cats”). For the sake of future enhancements to the code (not to mention the ability of another coder picking up the code later), I think more descriptive class names (like “header-categories”) is worth a couple extra characters in the code, especially if coders follow the other recommendations which you have helpfully provided
Thanks for the good article.
A few more suggestions:
Trim leading and trailing zeros:
- 0.90em can be shortened in two places and just be written .9em
Background positions:
- ‘top left’ is the default position, so that combination can be stripped completely. In the same way, background-repeat is by default ‘repeat’.
- Replace top left center right with 0% 0% 50% 100% respectively.
I always remove unneccessary spaces, tabs and lineshifts. It’s easy if you just keep one uncompressed version of your CSS file and one compressed file that will cache and regenerate if changes happen in the original file.
Some colors are shorter if you write their name rather than their hex value, for instance:
- red, coral, gold, green, ivory, linen etc.
A good compressor should also be able to combine identical CSS rules or selectors:
- #main{color:red} and #sub{color:red} becomes #main,#sub{color:red}
- #main{color:red} and #main{weight:bold} becomes #main{color:red;weight:bold}
@existdissolve – I agree with what you say. You could, for example, document the choice of class/id’s, but that give you extra chars too. You should make things clear yet small! Thanks for your comment.
@Torkil Johnsen – I agree with you on the Trim leading/trailing zero’s. It’s a valid point, that I think isn’t to farfetched.
I think the other point you made is valid too, although that’s when you are getting very extreme with CSS optimizing.
I have to point you to an accessibility issue that normal “color names” have. They don’t display correctly on several browsers.
Thanks for your thoughts!
I agree with #3 and #5, but in general you want to write things for maintainability. Use a compressor, zip and cache for performance. One way to reduce the amount of code is to have the CSS actually Cascade which you are eluding to in #3.
Yes, you are right. I have pointed that out in article too! Thanks for your comment!
Does CSS compression still make sense when you have apache server compression (gzip)?
I personally don’t like CSS compressors because they prevent me from doing quick changes on a live server when needed and oftentimes they also cause errors.
For example:
h2.myclass {
margin-top: 1em;
margin-right: 1em;
}
does not necessarily have to be margin: 1em 1em 0 0;
it can be! but unless other values have been inherited from h2.
But css compression is a nice protection against ripping from rookies. Some just see the source and say “uhm ahhh – no thanks!”
@Thilo – gzip will not compress as much if the file has already been through a CSS cruncher/compressor. If I had to pick only one of the two, then I would use gzip. However, doing both is fine too.
Make sure Apache has the headers set right so the file will be cached on the client’s machine.
http://developer.yahoo.com/performance/rules.html
I honestly think these most of these are completely pointless… Inheritance being the only good tip. Especially with default gzipping. As for CSS compressors stopping rookies stealing your CSS, don’t be so sure… thanks to Firebug.
[...] Posted an item on Worth Reading. 9 Tips to Smaller & Optimized CSS Files » DivitoDesign [...]
[...] Visit Source. [...]
Writing the code in one line when this have just one propriety:
html {overflow:scroll}
I do not agree with #8. Last rule is not permanently last. When you add new rule, you have to think about missing semicolon before. I consider it annoying and it’s bad habit, imho.
If you use some revision controlller system, it unnecessarily marks added semicolon as changed line too.
So if you want to compress CSS/JS, why to try hard if compressor can do it better?
Personally, I use two versions of CSS/JS files – one is compressed for deploy on production server, one is bloated for developement and debugging on localhost
(sorry my english)
[...] 9 Tips to Smaller & Optimized CSS Files » DivitoDesign. Tags: css, tips [...]
thx, great list
[...] 9 Tips to Smaller & Optimized CSS Files ??|Author?Stefan Vervoort ??|Trans? [...]
Your page file size is smaller since it doesn’t have style rules associated with CSS.
I agree with @yedpodtrzitko, and strongly disagree with #8. I agree that it is good to develop with optimization in mind. I think all of your other points are valid, but I think you are encouraging bad habits.
I have helped other developers/designers with CSS problems before and have taken over CSS code in which the last semicolon was omitted. In several of these cases, I’ve probably spent hours trying to find the source of an issue, only to find that a property had been added to a selector after the previous “last” property that didn’t have a semicolon.
If you had 50 selectors, you would be saving 0.0488 KB. I don’t think its worth the trouble for other developers to worry whether or not a semicolon is there.
As @yedpodtrzitko said, if a CSS compressor strips this off for you amongst other optimizations why not just let the compressor handle this for you?
My 2cents.
@yedpodtrzitko& @Lloyd – True. Absolutely. I should have said you could delete the semi-coloms after you are done coding, which was the original meaning of #8.
Thank you for your comments people, enjoyed reading them!
Nice list, although I could not find anything new for myself. A friend of mine started a css-size-optimization engine. You can find it a csscruncher.com.
Hey Stefan, the biggest issue with #3 is the fact that combining elements means that it makes it difficult if you want to make changes to individual elements such as h1, h2 and h3 when you do not want the changes to apply to all of the headings. Great post nonetheless, I pointed out the issue because I am editing a WordPress theme at the moment and I am having to make more changes as a result of the combination of styles of the elements. Speak to you on GoogleTalk soon! Thanks for the article.
great tips!
This is GOOD!
I’m just starting my HTML self-phase training.
Isn’t handled by HTML codes? or is HTML has this kind of functionality? Another question is what if I’ll be using Javascript? will there be difference in my coding? Now I am confused!
its really a newbie ideas. Thanks
Not bad to shorten all the css stuff but I shall not go with it. Perhaps most of the time we code for others and our code should be readable for rest of the world. It means, we are not going to code or to handle the code forever so we should follow some standard(a standard which should be feasible for all).
Hi Stefan,
Your post is great, great and great.
All notes you made is very common and every designer knows already but still no one follow it.
But it really helpful in loading time.
I just cleaned my osCommerce website css and it seems to become more faster in loading css file.
Once again many many thanks
Nice one, cheers
Nice Article. I am not sure whether it’s a good practice to remove ; from the last line.
Gopal,
http://www.productivedreams.com
http://www.twitter.com/gopalraju
Good tips! Useful for newbie web design people!
I am wondering what would be the effect of it on performance? I think it is quite easy to manage all that in grouped position so it definitely has benefits. I always like clean code and thanks to explain how can we do it.
I have a few sites but have always been afraid of editing a css file, so I would always buy a template with the css the way I like it, but now I know I can edit the colors and background colors of my css file. I did not know it was that easy. This will help to me to easily change the color to give my site a fresh look without having to change the whole layout.
thanks,
Chad
All good tips – I guess everyone has their own style when writing css. I have found numbering each section and including a commented out table of contents at the top of the document quite useful when coming back to edit an old file. It also helps me find my way around those larger css documents whilst working on them.
Thanks for the tips. I’m a beginner in web design and honestly I didn’t know that I need to optimize the CSS files. This post is enlightening for me.
I have been learning wordpress design structure since 3 months and have designed many of my blogs myself. We should have very well managed and sophisticated code and that is basic of coding. I love these tips as they are pretty good to keep css files clean.