I’m a bit behind on my blog read­ing, so it’s only today that I saw this great link on Site­point.

Cre­at­ing a Style-Guide for your site talks about a sim­ple but clever idea: cre­at­ing a HTML doc­u­ment illus­trat­ing each of the styles in your stylesheet, to refer to when apply­ing styles and also when cre­at­ing new classes.

I’ve worked on lots of large projects with mul­ti­ple devel­op­ers — in fact I’m work­ing on one now — and I think this will save a lot of time and frus­tra­tion, not to men­tion messy stylesheets. Top­Style has a sim­i­lar fea­ture with it’s stylesheet pre­view pane. You can spec­ify a par­tic­u­lar html page or the pro­gram will gen­er­ate it’s own from your stylesheet. An exter­nal CSS style guide would be more use­ful for use by pro­gram­ming teams, however.

Another tip I started using a while back is indent­ing related classes in my stylesheets. This improves read­abil­ity and makes it eas­ier to find related classes. It also forces me to put related classes together! All in all a good practice.

So, got any CSS organ­i­sa­tion or effi­ciency tips you’d like to share?