CSS Formatter

posted on May 13th, 2005 by Anthony

There’s been a bit of talk recently of how best to write CSS files, with lots of debate and tips about grouping, comments and what have you.

It’s a great way in making your life easier if you have to come back to the files after a long period of time, and it makes it easier for other people to pick up the reigns after you’ve been hit by a bus.

It’s a very good practice, but I don’t know about you, but I find it hard to stick to that sort of format when I’m actually bashing out lines while working on a new design. I tend to just start out with the main #ids, then try and group everything around them so at least all the bits that relate to each other are roughly grouped in the same area.

Generally though it’s inevitable selectors get chucked onto the bottom of the list, and before you know it things have started to build up. I know it’s not big, or clever, it’s just easier to do it that way – I’m far more interested in making sure the paragraph lines up properly than I am worried my CSS is getting messy.

Once all the main fleshing out of the design is done, then I start to think about trying to catergorise everything, moving structural and design pieces into separate files, and making things readable (well sometimes anyway…).

Anyway the main point of all this is that I was pointed to this interesting web based doohicky that, although it won’t automatically comment and flag your CSS, it will format it, order it and attempt to make it as efficient as possible.

You can choose from varying degrees of compression: from plonking everything into a single line with no whitespace, to automatically editing the code properly like TopStyle does.

It removes all the pxs from 0’s (I always put 0px because if you need to edit it later it’s slightly easier), it automatically shorthands hex colours were , it will attempt to combine and merge attributes were possible, plus a few other handy functions.

The small file I’ve tried it on resulted in a 15% filesize reduction – at the lowest compression, highest readablity setting – so it’s worthwhile giving it a whirl. I can see it being a good tool for thinning out the code before starting to make everything neat, tidy, and commented.