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.

BROWSE / IN TIMELINE
« Nice Drop caps with CSS
» CSS coding for cross browser compatibility

BROWSE / IN CSS Featured
« Nice Drop caps with CSS
» CSS coding for cross browser compatibility

TRACKBACKS (10)

COMMENTS (4) / ADD YOUR OWN COMMENT

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/

By Tom on April 10th, 2008 at 12:01 am

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!