If you have to work with CSS-files from other people (and I mean people who have a different understanding of code style) or with compressed files (and I mean big files), you need an automatic reformatting tool – that’s what this collection/review of online tools for css formatting is for.
Some development tools (like Eclipse, CSSedit or Coda with my plugin) have an integrated formatting tool – if you often need to reformat that’s of course the better solution.
This selection is of course quite random, subjective and incomplete, but nevertheless. I tested a few different style sheets and noted if I found problems. I also added how css-files can be provided (via copy/paste, from an url or as file upload).
ProCSSor (++)
ProCSSor has the best user interface and some nice features not found elsewhere, like right aligned columns. Very cool and since the developer provided an API I plan to integrate this service in my Coda plugin. Only missing feature: Convert properties/all to lowercase.
Code can be pasted in a form field, read via URL or uploaded from disk.
Codebeautifier (++)
Very good, uses CSStidy. Has enough options for all cases, and you can even use your own formatting template. Converts selectors or everything to lowercase if desired, can remove invalid code and handles even broken stylesheets. Nice: Adding the current timestamp as comment. Is available in different languages.
Code can be pasted in a form field or read via URL.
Prettyprinter (-)
Prettifies not only CSS, but also PHP, Java, C++, C, Perl and JavaScript. That’s nice in theory, but has the disadvantage, that it doesn’t validate the css code, so you can insert whatever there… Not very useful for CSS developers.
Code can be pasted in a form field.
flumpcakes CSS Optimizer (-)
flumpcakes.co.uk/css/optimiser/ »
Easy to use, but not many options. You can switch between pretty formatting and compression, but it has bugs if you use @import-tags. Interesting choice of illustration graphics for a css-tool.
Code can be pasted in a form field or read via URL.
CSSdrive compressor advanced (o)
www.cssdrive.com/index.php/main/csscompressoradvanced/ »
More a compression tool, but works good for reformatting also. Some nice features, like: Leave only comments with more than n lines. Missing feature: Convert to lowercase. And in some cases the result was not really an improvement.
Code can be pasted in a form field.
CSS formatter (-)
teenage.cz/acidofil/tools/cssformat.php »
Compress or format is possible. Has only few options, can merge classes with the same set of properties. But buggy if you use @import-tags and/or @media-tags: Imports are deleted and media-tags are not parsed and put at the end of the file.
Code can be pasted in a form field or read via URL.
FormatCSS (+)
www.lonniebest.com/FormatCSS/ »
Not the best interface, but works good. Lots of different formatting options. Converts everything or property names only to lowercase, if desired – which is a good feature. Bug with @import-statements (depending on their position).
Code can be pasted in a form field.
Conclusion
I’d recommend proCSSor and Code beautifier, both have a good (in the first case a beautiful) interface and handle complex stylesheets – as well as offering more than enough options.
I think it’s not necessary to mention, but it might be a good, very good idea to keep a backup of the original stylesheet, before deploying the formatted code…
This is very usefull stuff in certain cases!! Thanks for the work!