As much as I like to save some bandwidth here and there, going in to edit a stylesheet where each rule is on its own line can be a nightmare. I went in search of some CSS formatting tools to make life a little easier. (Because who wants to reformat 4000 lines of CSS by hand, right?).
It’s always a good idea to try and keep your CSS as valid as possible. On occasion you might need to put some hacks in there for IE6 or IE7 – if there are many, it’s probably a good idea to separate those out to stylesheets that are then loaded in with conditional comments.
To validate your CSS, head over to http://jigsaw.w3.org/css-validator/ – there you can point to a stylesheet URL, upload a file, or directly input CSS and have it validated.
To format CSS you can use the “Clean CSS” service at http://www.cleancss.com/.
Input the CSS you want to format and choose from several options, hit submit, and voilà, out comes formatted CSS – it also lets you know the code changes that it made.
From the dropdown select the type of formatting you want. For a production output you should probably choose “High (moderate readability, smaller size)”, if you want to make CSS more readable, use the “Low (higher readability)” option.
Unless you know what you’re doing – you should probably leave “Sort selectors” and “sort properties” unchecked, as these have the potential to break the cascade of styles in your stylesheet.
I personally prefer to keep the “Compress font-weight” option unchecked – (e.g. this changes
font-weight:700; doesn’t quite read the same).