11 Useful Tools To Check, Clean & Optimize Your CSS File
Whatsapp Pinterest

css toolsMinimizing the filesize of the CSS stylesheet has been regarded by many as a good way to increase your site loading speed. Indeed, by reducing the CSS file by several kilobytes, the server will take a shorter time to load and result in a faster webpage.

In the event that your articles hit the Digg frontpage, this could also be one of the few deciding factors (there are many more) whether your server will crash or not.

Some of the most common methods used to minimize/ optimize a CSS stylesheet involves eliminating unused selectors, unwanted whitespace, tabs, comments and change the longhand declaration to shorthand notations.

I know that some of you here are not tech-savvy enough to edit your own CSS code, so here I will provide you with some of the useful tools that you can use to optimize your CSS code, even if you have completely no knowledge of CSS coding.

Check your CSS code

W3C CSS Validator

The W3C CSS validator is a tool that you can use to validate your CSS. You can either download the Java validator to your computer and use it offline, or use the online form to check your CSS code.

w3c-validator - check css code

CSS Validator Firefox Add-On

To make it easier for you to validate your CSS code, there is this Firefox extension – CSS Validator – that you can install on your browser. Once installed, you can easily and quickly check your code with a right click of the mouse.


Even though your CSS code is validated, it does not mean that it is free from error. The validation only means that it complies with the CSS standards set by the W3C. If you want to validate as well as looking into a few browser compatibility issues with your stylesheet, then CSSCheck is a good tool for you.

CSS Analyzer

CSS Analyzer is an useful tool that allows you to validate your stylesheet against the W3C’s standard, perform a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

In case you are wondering, the color contrast test is to check that the foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits, or when viewed on a black and white screen.

Clean up your CSS code

Dust-Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors on the page that you are viewing. As you test subsequent pages of the same domain, the result is cross-checked with the previous data and any selectors encountered are crossed off from the list. You can use it to test individual pages or get it to spider the whole site.

In the end, you will get a report on the selectors that are not used anywhere in the site. You can then remove those selectors from your stylesheet (lesser code means smaller filesize).

clean css tool

CSS Redundancy Checker

Similar to Dust-Me Selectors, this tool checks your site for unused and redundant CSS selectors. The only thing that is different is that you need to manually enter the URI for each page that you want to test.


Optimize and Compress your CSS code

Once you have completed checking the validity of your CSS and cleaned up unnecessary code, it’s time to optimize CSS file and reduce it to the smallest possible size.

CSS Tidy

CSS Tidy is an 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). What CSS Tidy does is mainly remove the comment, unnecessary whitespace and change some of the code to shorthand. During compression, you can choose between code readability or maximum compression. Depending on the length of your code, you can easily achieve a compression ratio of up to 30% or more.

Since CSS Tidy is an open source project, there have been several websites that use the code and turned it into an online tool for people to use. Here are some of them:

Other CSS Optimizers

FlumpCakes CSS Optimizer

A simple optimizer that comes with several options for you to choose from.


Robson CSS Compressor

While it may look the same as others, I have found the compression rate for Robson CSS Compressor to be the highest among them all. Although it comes with several options for you to tweak the setting, leaving all the options untouched (all options checked) always produces the best result.

CSS Drive CSS Compressor

The CSS Compressor offered by CSS Drive comes in two modes that you can use: Regular and Advanced. In the Regular mode, you only need to select which level of compression you want (Light, Normal or Super Compact) and the CSS Compressor will do the rest. In the Advanced mode, you are given more options and a greater say on how you want your stylesheet to be optimized.

CSS Optimizer [No Longer Available]

The CSS Optimizer from mabblog.com [No Longer Available] is a command line application for Mac and Linux. It is meant for those who are more comfortable with the terminal rather than an online interface. There is also a simple online version available for those who want to quickly get it over and done with.

Hopefully the tools listed here are enough for you to tweak and optimize your CSS stylesheet. If you have used any other tools that are more useful than those mentioned above, share them with us in the comments.

Explore more about: Web Design, Web Development, Webmaster Tools.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. FrankC
    May 16, 2015 at 8:19 pm

    That Dust-Me Selectors Firefox addon is a great tool for checking separate style sheets. But has anyone come across a CSS 'duster' that can check for unused/redundant CSS rules in an on-page style block? That's what I need for one particular project.

  2. Audio Bible
    November 6, 2009 at 3:47 pm

    I want to pay someone $$ to validate, compress, clean up, optomize and make sure i do NOT have any code in my CSS file that i am not using throughout my website. Who is good and can help me with this?

    let me know...........thanks.

    • Arpit Kharbanda
      December 28, 2014 at 2:59 pm

      I can help you with it.

  3. visaap
    September 25, 2009 at 5:57 am

    Oeps, overlooked that one :S

  4. visaap
    September 25, 2009 at 5:56 am

    A really nice and customizable one is cleancss.com/

  5. Johnny C
    January 27, 2009 at 3:08 pm

    Thanks a lot. I am working on a CSS that is ridiculously unorganized and these have helped a lot ... so far. Most of the stuff needs to be done manually though. Cool List.

  6. Wazdesign
    January 21, 2009 at 1:15 am

    Very well i like it.

  7. Nick
    January 20, 2009 at 4:50 pm

    Didn't know some of these. Thanks.

  8. Timothy
    January 20, 2009 at 3:18 pm

    I tend to use the YUI compressor to compress my JavaScript AND my CSS. I would give it a try. It usually saves about 30% in file size.

    • Damien Oh
      January 21, 2009 at 4:43 am

      That is an impressive tool. Thanks for informing.

  9. Gerasimos
    January 20, 2009 at 4:25 am

    Great list. Thanx for that :)

  10. David | WebModia
    January 20, 2009 at 5:12 am

    Great list of tools! I'd like to add one you missed, it is rather new but I think worth mentioning: CSS SuperScrub, isnoop.net/tools/css.php which claims to "reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names."

    In my tests with a CSS file that was (IMO) already fairly clean and organized, CSS SuperScrub managed to still shave off nearly 2kb. Admittedly, a lot of this was via removal of commenting (which I typically do *not* want removed) but it did manage to also find several instances of redundant selectors and accurately grouped those together. I'd want to tweak the results a bit to keep my particular method of organization intact, but overall this is an impressive tidy-up tool.

    • Damien Oh
      January 21, 2009 at 4:41 am

      Thanks for your recommendation. I have tried CSS SuperScrub before, but I find it too simple and does not allow me to tweak any of the setting (like CssTidy and its equivalent online sites). Nevertheless, I must admit that for someone who are looking for something simple and easy to use, CSS SuperScrub is the one.

  11. Damien Oh
    January 19, 2009 at 8:04 pm

    @Hardi, Milind Alvares: You are welcome. Hope this is of help to you.

  12. Milind Alvares
    January 19, 2009 at 12:21 pm

    Needed this. Thanks a bunch!

  13. Hardi
    January 19, 2009 at 10:54 am

    Hey great resources damien.. thanks a lot

  14. Steffan Williams
    January 19, 2009 at 10:46 am

    And if you're *that* anal about your stylesheets, there's an alphabetizer for selector attributes over at: steff.me/alphabetizer/

    Fun times. ;)