Detect unused CSS selectors and remove them from the website

During the development, we forget to remove selectors, which have been changed during the different phases of the website, Which makes stylesheet file so large. Due to which, stylesheets load slower, which makes the website load slower. So, this is necessary to remove unused css rules from stylesheets to make a website load faster.

There are so many online tools, Firefox Extension as well as commercial products to do that.

Firefox Development Tool: Dust-Me Selectors
It scans your HTML pages and find the unused CSS selectors. It takes all CSS selectors from all stylesheets attached to the page you are viewing and then scan that page to find the unused selectors. It stores data separately for each website you viewed.

Disadvantage: It just gives you the unused selectors, but not providing the updated stylesheet.

Dead Weight: Ruby Gem
It is a CSS coverage tool and only works for rails website. You need to provide a set of stylesheets and URLs, from which it provides a list of selectors which can be “safely” deleted. You can manually remove them from the stylesheet using that list.

You can watch the screen-cast on Dead Weight Introduction at http://railscasts.com/episodes/180-finding-unused-css

Unused-CSS.com: Online Tool
It asks for an online URL to check. From the URL, It scans all CSS files and show the results separately for each stylesheet with graphs. Currently it scans only homepage, but if you need whole website results, you need to provide your e-mail address and it will send the results to you in email.

Helium CSS: Javascript Tool
It is a javascript-based tool and runs from the browser. It is a used for discovering unused selectors across many pages on a web site. It accepts only list of URLs, parses each URL provided and build a list of stylesheets. Using this list of stylesheets and URLs, it generates a list of unused selectors not used in any of the URL provided.

TopStyle 5: Windows Application
It is an HTML Editor, which includes a tool named Style Sweeper. Style sweeper can remove white spaces and blank lines, sort according to Class, Element, ID and also combines multiple selectors. It will also combine repeated property as well as selectors if they are same. But it’s a commercial product costs $80 (USD).

LiquidCity CSS Cleaner: PHP Script
It uses regular expressions to check any HTML page specified by you, generates the report with unused selectors for that HTML page only. From that report, you can manually remove them from the stylesheet.

There are so many other tools available. We will introduce them very soon.