10 Online Tools to Help Optimize and Format CSS

Sam Deering
Tweet
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. Digg effect) and for most of us, the most important part is that it gives you more readable code. For those coders with limited knowledge, here we’ve collected 10 fairly basic online tools that offer optimization and formatting without much effort at all. Have fun!

Related Posts:


1. Online CSS Optimiser


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.
Online-CSS-Optimiser1.jpg
Source


2. 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.
CSS-Compressor-–-CSS-Drive.jpg
Source


3. CSS Analyser


A small utility 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.
CSS-Analyser.jpg
Source


4. 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)
> Group style attributes and values which appear multiple 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.
flumpCakes-Online-CSS-Optimiser-or-Optimizer.jpg
Source


5. Styleneat – CSS Organizer


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.
Styleneat-–-CSS-Organizer.jpg
Source


6. Clean CSS – Optimize and Format your CSS


A CSS optimizer and formatter with a reasonable amount of options, which takes your CSS code and makes it cleaner and more concise.
Clean-CSS-–-Optimize-and-Format-your-CSS.jpg
Source


7. CSS Compressor – Online Code 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.
CSS-Compressor-–-Online-Code-Compressor.jpg
Source


8. Code Beautifier – CSS Formatter and Optimizer


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.
Code-Beautifier-–-CSS-Formatter-and-Optimizer.jpg
Source


9. CSS SuperScrub


This 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.
CSS-SuperScrub.jpg
Source


10. CSS Tidy


Open source software that you can use to optimize and compress your CSS file. It is available in .exe format (Windows only) and a zipped php script format (all platforms, for Web developers).
CSS-Tidy.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.