Advanced CSS Optimization with Code Beautifier

There are several frustrations working with CSS files. One is keeping the size of the CSS file small so that it does not take up a lot of bandwidth. Second, is keeping the CSS file “clean”. CSS optimizers seek to help users overcome these frustrations.

There are several CSS optimizers out there and I have reviewed one other in the past. Code Beautifier is a little more advanced than other optimizers and provides a greater set of options to control the optimization process.

The interface is easy. Either copy and paste your CSS file into a text box or point Code Beautifier to the URL of the CSS file. I would suggest that Code Beautifer also include a means to upload an actual fiile.

There are several options for optimizing your CSS file.

• Compression – This setting determines the level of compression. The levels are Highest, High, Standard and Low. The difference between each is the level of readability. The Highest level will remove all white space and scrunch everything together. This is ideal if you are seeking to shrink your CSS file as small as possible. Users can also create their own custom compression levels. I have not read how to do this, but it involves the creation of a template.
• Preserve CSS – If checked, this will keep all comments and hacks. If you want to compress your file as much as possible it is best to leave this unchecked.
• Sort Selectors – This checkbox controls whether the optimizer should alphabetically sort your selectors. I am really surprised they offer this as an option. Changing the order of your selector WILL AFFECT THE BEHAVIOR OF YOUR CODE!!! Personally, I would not use this option unless I had a really small and simple CSS file.
• Sort Properties – If checked, this will alphabetically sort the properties underneath each selector.
• Regroup Selectors – If you have multiple selectors such as a, a.hover and a.visited it will merge these items under “a”. Unfortunately, this can have undesired effects. It will obliterate the differences and thus may change your styling. It is best to leave this at “Do not change anything”.
• Optimize Shorthands – A variety of values for properties can be written in a shorthand format. Choices include “Don’t Optimize”, “Safe Optimizations” and “All Optimizations”.
• Compress Colors – If checked colors such as #336600 will be rewritten as #360.
• Compress Font Weight – If checked, a font weight of “normal” will be rewritten as “400″, etc.
• Lowercase Selectors – makes all selectors lowercase. Recommended. This is needed to comply with XHTML standards.
• Case for properties – select the case for all properties and their values. Lower case is recommended.
• Remove unnecessary backslashes – this may affect any hacks. Careful with this.
• Remove last ; – removes the semi-colon at the end of each property
• Discard invalid properties – This is useful only in a development stage. Discarding invalid properties may remove selectors that affect the styling of your pages.
• add timestamp – adds a timestamp to file
• output as file – When optimization is complete, will provide a button to download the new version as a file. Otherwise, you will have to copy and paste the new code.

Once all options have been selected and the CSS file processed, Code Beautifier will output a series of messages of all items that have been changed. Below is an example from my test CSS file:

37 Optimised number: Changed “0px” to “0″
61 Optimised color: Changed “#000000″ to “#000″
62 Optimised color: Changed “#ffffff” to “#fff”
63Optimised color: Changed “#003366″ to “#036″
121Removed unnecessary backslash
Optimised number: Changed “1.0em” to “1em”
Optimised shorthand notation (padding): Changed “2px 5px 2px 5px” to “2px 5px”

Notice it provides the line number where the change was made.

CB will also provide the starting size, ending size and compression ration. My file started at 13.762 KB, ended at 8.522 KB, with a compression ratio of 37.9%.

Overall, Code Beautifier is a good tool though it may be a little dangerous for the beginner. Some of the options can have dire consequences if you are not aware of what the option may do to your file.

Code Beautifier is based on the open source project CSSTidy.