Best Tool to Audit and Optimize Your CSS Codes

       Once your website starts to grow, so will your code. As your code expands, CSS may suddenly become hard to maintain, and you may end up overwriting one CSS rule with another. This complicates things and you will probably end up with plenty of bugs. If this is happening to you, it’s time for you to audit your site’s CSS. Auditing your CSS will allow you to identify portions of your CSS that is not optimized. You can also reduce the style sheet file size by eliminating lines of code that is slowing down your site’s performance.

Here are 5 good tools to help you audit and optimize CSS.

1. Type-O-Matic

Type-o-matic is a Firebug plugin to analyze fonts that are being used in a website. This plugin gives a visual report in a table, bearing font properties such as the font family, the size, weight, color, and also the number of times the font is used in the web page. Through the report table, you can easily optimize the font use, remove what is unnecessary, or combine styles that are way too similar.

2. CSS Lint 

CSS Lint is a linting tool that analyzes the CSS syntax based on specific parameters that address for performance, accessibility, and compatibility of your CSS. You would be surprised with the results, expect a lot of warnings in your CSS. However, these errors will eventually help you fix the CSS syntax, and make it more efficient. Additionally, you will also be a better CSS writer.

3. CSS ColorGuard 

CSS ColorGuard is a relatively new tool. It’s built as a Node module and it runs across all platforms: Windows, OS X, and Linux. CSS Color Guard is a command line tool that will notify you if you are using similar colors in your style sheet; e.g. #f3f3f3 is pretty close to #f4f4f4, so you might want to consider merging the two. CSS ColorGuard is configurable, you can set the similarity threshold as well as set the colors you want the tool to ignore.

4. CSS Dig 

CSS Dig is a Python script and works locally on your computer. CSS Dig will run a thorough examination in your CSS. It will read and combine properties e.g. all background color declarations will go underneath the background section. That way you can easily make decisions based on the report when trying to standardize your CSS syntax e.g. you may find color across styles with the following color declaration. 

These color declarations do the same thing. You might as well go with the #ccc or with the capital #CCC as the standard. CSS Dig can expose this redundancy for other CSS properties too, and you will be able to make your code be more consistent.

5. Dust-Me 

Dust-Me is an add-on for Firefox and Opera that will show unused selectors in your stylesheet. It will grab all the styles heets and selectors that are found in your website and find which selectors you are actually using in the web page. This will be shown in a report, you can then press the Clean button and it will clean up those unused selectors and save it to a new CSS file. You can download this tools from Firefox Addons page or the developer’s site, and if you are Opera fans you can get it from the Opera Extensions Gallery page.