Optimising your CSS files

Optimising your CSS files and cleaning them up is very important not only for the size but for further maintanence issues as well. This would enhance readability too.

Below are few principles which can be read in details in “SmashingMag” and these can be applied not only to CSS files, but also to Javascript, HTML and other programming languages. Considering the principles below will help you to create more optimised websites from user experience standpoint. I have already implemented these for few of my websites for my company
eg:

The Principles as discussed in SmashingMag

1. Use Shorthand :

Instead of writing something like this

p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }

You can try writing the same in a line

p { margin: 10px 20px 30px 40px; }

2. Replace Hacks with conditional comments :

Use conditional comments instead of hacks.

3. Use whitespace wisely :

In your CSS files avoid using multiple line breaks for readability.

4. Use resets :

Using a framework and/or a reset set of rules can help keep your work optimized.

5. Future-proof your CSS :

Seperate layout styles from the rest of the styles.

6. Document your work

We all know how important documentation is. When working in a team this helps to keep your styles consistent.

7. Make use of compression :

Try to compress your CSS files using either manual compression or some kind of online tool like CSSTIDY. I will write about this in a seperate post and how you can use that. Follow this link to read that post. I have implemented and installed CSSTIDY in my server and you can try it there.