Design, CG Graphics & Inspiration
Tools for formatting CSS code

Tools for formatting CSS code

Do you love your CSS code as much as I do? If you do, then there is no doubt that you strive not only to ensure that it behaves and feels well, but also has a nice look. I hope that the tools described below will help your code to get closer to the ideal.

Styleneat

Tools for formatting CSS code

This tool is probably, the most simple of all the presented in this review.
It has not so many features:
• Sort properties alphabetically
• Sort selectors alphabetically (if there is a tick “Safe Organize” (safe format) – this option is not available)
• Ability to select the formatting style: multi-line or in a single line formatting
• Import and organize linked (@import rule) Stylesheets
• You can send the code for processing by means of: a text field, download the file or give a link to CSS
• You can take the result as a CSS code or download the file

FormatCSS

Tools for formatting CSS code

Despite its fearsome appearance, the tool works fine with its functions, and it has plenty of them.
You can configure many things:
• The placement of blanks / tabs / new lines,
• Sorting of properties and names of selectors,
• Conversion of names of properties and selectors in the lowercase, etc.

What I especially liked in this service: is the ability to format the sub-rules as a “ladder” (I think this is a very convenient way of organizing styles).

CleanCSS

Tools for formatting CSS code

Rather powerful tool that provides us with many opportunities:
• You can copy and paste the CSS into the field “CSS-Code” or as a link to style file
• You can get the results in the form of text or file
• Users are provided with 4 types of formatting the source code: the code can be optimized for the smallest or vice versa, for better readability. It is possible to specify the formatting template in the “Custom template”
• It can combine the rules and merge shorthand properties
• If there is a necessity – it can remove the comments and discard the invalid properties
• As the services above, it will willingly alphabetize everything your heart desires and convert it to lower / uppercase
By the way, there is “CSSTidy” engine in the basis of this service – an open source CSS parser optimiser. So that everyone can freely create his own beautifier on its basis. It also has an analogue – CodeBeautifier. The Feature set is virtually identical to CleanCSS (service also works on CSSTidy).

ProCSSor

Tools for formatting CSS code

As for me, I think that this one is the most useful of all services represented in this review. This service meets users with nice interface and very descriptive tooltips that allows you quickly understand the settings.

Like any other self-respecting beautifier, ProCSSor lets us insert the code into the text field, in the form of a file or link. It transfers the result to the the browser and displays a link for downloading the file.

The tool has a lot of settings to please almost any user, it doesn’t make any sense to enumerate them – it is better to try them. The pleasant thing in this service is the ability to save your settings so that next time you can skip the setup and go directly to the process of improving.
Here is another useful thing – ProCSSor provides API, here you can find the documentation: http://procssor.com/apidoc.pdf.

  • AndrewG,
  • April 24, 2011

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.