tips

Tool to clean your CSS

I’m sure most people that develop web design have had this problem. Working on a huge site can add a lot of redundant code, especially CSS code.

Once you have finished working on your design, its time to optimize your code. Cleaning a CSS file manually can be very cumbersome and you might end with strange results, going back and forth in your backups to put in a style you should not have removed.

I was about to embark on this task anyway, when I decided to do a little Google search, and actually found a Firefox Extension developed by Sitepoint.

It’s called Dust-Me Selectors and gives you a tool to automatically search a site for its CSS styles and then present you with a list of redundant styles.

See here for the list it gave me of a site I had been working on, putting selectors in and out, and making it a big mess:

The tool itself is very simple to use, after installing it in Firefox you get a nifty little broom tool in the bottom of your window.

(Image courtesy of Sitepoint)

The tool has many nifty features, such as searching your entire site via your sitemap (.xml format or HTML sitemaps are recognized). This helps you if you have a lot of differently designed subpages, so it does inadvertently advise you to clean a selector you were actually using on a different part of your site.

(Image courtesy of Sitepoint)

The tool is fairly small and uncomplicated, but it does give you the exact tools you need for cleaning your CSS style sheets.

(Image courtesy of Sitepoint)

Tags: css, extension, firefox, help, sitemap, tool, tutorial, web design

Related posts

• Website designing trends (1)
• Howto: Fix .png errors in IE and Firefox (0)
• From 0 to 100.000 visitors per month (2)
• Directory Submitter - digiXMAS Submitter review (2)
• 7 methods for driving traffic (6)