Great idea: CSS Style Guides

I’m a bit behind on my blog reading, so it’s only today that I saw this great link on Sitepoint.

Creating a Style-Guide for your site talks about a simple but clever idea: creating a HTML document illustrating each of the styles in your stylesheet, to refer to when applying styles and also when creating new classes.

I’ve worked on lots of large projects with multiple developers - in fact I’m working on one now - and I think this will save a lot of time and frustration, not to mention messy stylesheets. TopStyle has a similar feature with it’s stylesheet preview pane. You can specify a particular html page or the program will generate it’s own from your stylesheet. An external CSS style guide would be more useful for use by programming teams, however.

Another tip I started using a while back is indenting related classes in my stylesheets. This improves readability and makes it easier to find related classes. It also forces me to put related classes together! All in all a good practice.

So, got any CSS organisation or efficiency tips you’d like to share?