Automatic CSS Code Formatting & Optimization

Using a CSS code formatter allows you to minify your CSS quickly or simply reformat and tab your code to make it easier to read.


Whatever your preference is, using the CSS code beautifer allows you to tweak your settings (See image below) to conform to W3C Standards – CSS Techniques for Web Content Accessibility Guidelines.

CSS Formatter and Optimizer - Code Beautifier

CSS Formatter and Optimizer - Code Beautifier

Compression setting – I usually set this to “High“. Even though it states moderate readability, I like my code condensed because:

  • You can organize your styles into sections with comments – This helps significantly for troubleshooting and new additions!
  • You wont have to do as much scrolling – Time is more important than readability. Especially since time and tidiness is probably the reason you’d be looking for a tool like this anyways. You don’t want to be stuck going back into the code, find an exact ID or class, do a search for it, remember the line number (in some cases when editing several related CSS definitions), and so on. Tedious!
  • Use Firebug to troubleshoot. You’ll have the equivalent of the “Low” filter on in that which gives you high readability. So even if you don’t mind the scrolling it still makes editing easier. Of course with firebug you don’t need to worry about searching.

The only other thing here worth commenting that I really liked is the “Sort Properties” option. This orders the properties in a all your style definitions alphabetically. This makes things a little quicker to find when you have styles with 20 some odd properties.

Tool: http://www.codebeautifier.com

CSS Techniques for Web Content Accessibility Guidelines

Respond: Leave A Comment | Trackback URL

Entrupeners, Subscribe for the lastest tools, tips, and tutorials.

Leave a Reply

Custom Theme by Rob Malon | Content & Design © 2010 - RobMalon.Com - Chicago, Illinois