4 CSS Tools to Audit and Optimize CSS Code

Once your website starts to grow, so will your code. As your code expands, CSS may suddenly become difficult 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 are not optimized. You can also reduce the stylesheet filesize by eliminating lines of code that are slowing down your site’s performance.

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

Type-o-matic

Type-o-matic is a Firebug plugin that analyzes fonts being used on a website. This plugin provides a visual report in a table, displaying font properties such as the font family, size, weight, color, and the number of times the font is used on the web page.

Through the report table, you can easily optimize font usage, remove unnecessary elements, or combine styles that are too similar.

CSS Lint

CSS Lint is a linting tool that analyzes the CSS syntax based on specific parameters that address performance, accessibility, and compatibility of your CSS. You might be surprised with the results, as you can 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 become a better CSS coder.

CSS ColorGuard

CSS ColorGuard is a tool built as a Node module and it runs across all platforms: Windows, Mac, and Linux. CSS ColorGuard is a command line tool that will notify you if you are using similar colors in your stylesheet; 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.

CSS Dig

CSS Dig is a Python script that works locally on your computer. CSS Dig will run a thorough examination of your CSS. It will read and combine properties, e.g., all background color declarations will go under 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.

 color: #ccc;
 color: #cccccc;
 color: #CCC;
 color: #CCCCCC;

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 more consistent.