Web Design CSS Tools

Posted by on Tuesday, April 6th, 2010 at 3:07 pm.

I thought I’d post an article about some useful CSS tools that I have found along my travels in web design.

I hope you will find them useful, and that you will perhaps post some other tools that you use in the comments!

Clean CSS

Clean CSS - A Great Tool for Optimising your CSS

http://www.cleancss.com/

This is a really great tool for many reasons: It minifies your CSS code, combines selectors that use the same styles, converts your CSS to shorthand, and much more.

This tool gives you an amazing amount of control over how you want your CSS output, and it also tells you the amount of file size savings you have made.

First, I paste my full CSS document in the left hand side. I then tend to use the “High (moderate readability, smaller size)” compression, and always make sure to select “Save comments” in the list of options. I then click “Process CSS” on the left and as quickly as I can say “Clean my CSS”, the job is done! It really is as simple as that. Just copy and paste the new CSS (or tell it to download the new CSS file.

Dust-Me Selectors

Dust-Me Selectors - A Useful Tool for Finding Unused CSS

https://addons.mozilla.org/en-US/firefox/addon/5392

This tool is a Firefox add-on that allows you to spider your website and find selectors in your CSS that have not been used. In other words, you can have a little Spring clean of your CSS file.

It will still involve some manual work to remove the unwanted CSS, but it is great for finding things that you may have added and then forgotten to remove at a later date.