10 Online Tools and Apps to Help Optimize and Format CSS

November 20, 2009 - 30 Comments
CSS, Web Apps, Web Design

Why would you ever need to optimize (or optimise, which ever spelling you prefer) or reFormat your CSS? Optimizing your CSS will not only allow your web page to load quicker, it also increases the durability and resilience of your site when there is a spike in visitors (i.e. the Digg effect) and, for me, the most important part is that it gives you more readable code.

Some of these tools are fairly basic, offering optimization and formatting without many options or user control, which are fine for coders with limited knowledge. For the CSS pros, there are some advanced tools and apps that will allow you to choose the level of compression and also offer many options regarding your optimized CSS. You can choose to eliminate unused selectors and properties, unwanted whitespace, tabs, comments and you can even change the longhand declaration to shorthand notations.

No one who codes there CSS has complete confidence that it is perfectly formatted, this is were these tools come in and help.
Please note, these tools are not CSS validation or error checkers, if you are looking for that try the The W3C CSS Validation Service.

flumpCakes Online CSS Optimiser/Optimizer

This feature rich tool takes your CSS file and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. Here is a full list of what it can do:

Removes comments
Removes white space (such as excess spaces)
Converts RGB values to Hex (they’re smaller)
Converts Hex values in the format #RRBBGG to #RGB.
Changes zero values with a size specified to 0. (0px would change to 0)
Changes values such as border: 1px 2px 1px 2px; to border: 1px 2px;
Converts multiple background, font, margin, padding, list attributes into a single attribute
Converts multiple border values into single attributes
Option to convert absolute values (PX & PT) into relative values (EM)
Groups style attributes and values which appear mutliple times into a single style

This tool reads CSS just like a browser would. So using hacks which are browser specific will give random results, make sure any hacks are removed before use.

Styleneat – CSS Organizer

Styleneat organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas making it easier to see how they relate to each other.
With this tool you have the option of sorting the properties alphabetically, sorting the selectors alphabetically and you have the choice of multi or single line formatting.

Clean CSS – Optmize and Format your CSS

CleanCSS is a CSS optimizer and formatter with a reasonable amount of options, that takes your CSS code and makes it cleaner and more concise.

CSS Compressor – Online Code Compressor

CSS Compressor, obviously compresses the CSS to reduce the code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Code Beautifier – CSS Formatter and Optimiser

This tool is based on the popular open-source CSS parser and optimizer, CSS Tidy. Code Beautifier offers the most options compared to all of the tools in this article.
You can sort and merge selectors and properties, compress colors and font-weights, choose between lower and uppercase formatting and even has the option to discard invalid properties.

CSS SuperScrub

CSS SuperScrub can significantly reduce the size and complexity of your CSS by stripping out unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
There are limited options with this tool, which is no bad thing, it works exactly as intended: It scrubs your CSS.

Online CSS Optimiser

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

CSS Compressor – CSS Drive

Use this utility to compress your CSS and increase the loading speed of a web page and save a little on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in most cases, creating a good balance between the two.
It also has the option of an Advanced Mode that gives you more compression options.

CSS Analyser

The CSS Analyser is a small utilty that allows you to check the validity of your CSS against the W3C's validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.

CSS Redundancy Checker

CSS Redundancy Checker is a simple tool with one simple, yet useful function. It is a tool that finds CSS selectors that aren't used by any of your HTML files and any that are redundant it removes.

CSS Code Formatter and Optimizer – CSS Portal

Yet another code formatter and optimizer, basic, but one that is worth mentioning and trying.

You might also like…

CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »

Subscribe via RSS or Follow us on Twitter

Share This Post

There are 14 Comments › Leave your comment

Design Informer
20 Nov, 2009

Cool post! These will definitely be helpful, especially for large CSS files.

Reply
designfollow
20 Nov, 2009

great

thank you

Reply
Michelle
20 Nov, 2009

Really useful post, thanks :) I use CSS a lot myself so will take a look at a couple of these now.

Reply
lensky
20 Nov, 2009

cooooooooool! I will check all my css right now! so many thanks for this post!

Reply
Bilal Aslam
21 Nov, 2009

Thank you so much, this is such a great list. I’ve been using Styleneat for some time and you’ve just made my day!

Reply
Clarke Isackson
21 Nov, 2009

I do not want to sound like a prude, but I could not bring the flumpCakes Online CSS Optimiser/Optimizer website onto my work screen without risking being accused of viewing sites with sexual implications. Why on earth do they have that image on their website or am I missing something – always open to learn the error of my thoughts. Otherwise a great article.

Reply
Paul Andrew
21 Nov, 2009

I have no idea why it is there, does anyone know why they chose that particular image?

Reply
Trisha
22 Nov, 2009

wow, a CSS compressor. I wonder how much load time it saves. hahah, the flumpcakes image… keep scrolling! great post!

Reply
Sakib
23 Nov, 2009

the CSS compressor, it’s cool, thanks for the great share.

Reply
Spenser
23 Nov, 2009

@Clarke Isackson @Paul Andrew After a brief look at the old google, it turns out that ‘flump’ is a treat made of marshmallows that takes on a certain form after it is made. So…a flump cake would any of these in their final form which is pink and helix shaped. So…my guess is the image involves that, taken to a different level. | Delicious ;)

Awesome post btw; thanks for the options and time spent getting this together.

Reply
partha sg
24 Nov, 2009

thanks for this awesome post……….this post help me lot thanks again…:)

Reply
BTP
16 Dec, 2009

thanks…. it will useful for my works.

Best Regard

Reply
denbagus
19 Jan, 2010

great tools.. thank you

Reply
Isaac Opuni
22 Jan, 2010

Speckyboy proves their resourcefulness once again. Props to you for the good work.

Reply