12 Articles and Tools for CSS structuring and optimising

Optimising and structuring your CSS file is important, especially when you have a large stylesheet. Optimising and structuring your site makes your stylesheet more readable, which makes it easier to update. It can also make your CSS file smaller in size, so your page will load quicker. A list of great tools and articles to optimise and structure your CSS.

Articles

How to structure large css files
An extensive article whith a lot of tips and tricks to structure large CSS files.

Write a well structured CSS file without becoming crazy
A great article on Woork explaining how to be simple, methodic and “elegant-code” oriented.

Optimize your CSS files to improve code readability
Another article on Woork, very clear with much example code.

Top-Down approach to simplify your CSS code
What is the correct approach to design a CSS file? Well, it’s the Top-Down approach. It’s about minimizing the number of CSS elements and using standard HTML tags (like h1, p, ul, …)

CSS Formatting Screencast
A screencast on CSS Tricks, showing how to format your CSS very clearly. You should watch this one.

Efficient CSS with shorthand properties
This is a really great article on 456 Berea Street explaining all shorthand properties. A guide for all webdesigners who want to code efficiently.

Optimize Your CSS even more
Paul Stamatiou wrote this article about optimising your CSS file by compressing it. He uses PHP to compress the CSS file into a .gz format.

Tools

Review of CSS optimization Tools
This review on BloggingPro shows clearly the advantages and disadvantages of the most common CSS optimization tools. You should read this before using one. This article tells you that “Icey’s CSS compressor” is the best one.

The most used CSS optimization tools are:

Conclusion

With this articles, you can easily optimise and organize your CSS file. If you don’t have time to do it your self, you can use one of the great CSS optimization tools. Have I omitted an article or a tool, please tell me.

This entry was posted on Wednesday, April 9th, 2008 at 9:01 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tom Says :
1
Not sure if any fo the articles mention this, but SitePoint created a great Firefox tool called Dust-Me Selectors that will alert you to any unused CSS selectors. You simply enable it, then browse normally through your site (there’s also an option to “spider” it). At the end you’ll have a list of CSS statements you can delete.

http://www.sitepoint.com/dustmeselectors/
Emil Stenström Says :
2
Hi! Just wanted to thank you for mentioning my article, it’s always nice to know someone read and liked it Also, good collection of links overall, a sign of good research! Keep it up!
Fabian Says :
3
@Tom, Thanks for the link, I didn’t know about that tool. I will install that one for sure.

@Emil, You’re welcome :-). Thanks for you comment!
Marc Says :
4
Tnx for the usefull information. Going to bookmark this

Onyx Design Weblog