Detecting Unused CSS Selectors – Part 2

I am back with the concluding part of Unused CSS detection series. In the first post of the series, we covered three tools Dust-Me Selectors, Liquidcity CSS Cleaner and Unused CSS. Whenever new pages are added, the CSS selectors are added as per requirement, but when old pages are removed from a website,  the CSS selectors hardly ever get modified. When a website adds 10 new pages, those might require adding new selectors. Such selectors are required and always added. But, the same is not always applied while removing the pages. Very often the old CSS selectors remain present in the CSS files. The redundant classes become a bigger problem as the site grows bigger.

Multiple developers working on same website at different times does aggravate the problem. We will take a look at few other tools available for identification of such unused CSS.

CSS Usage

How could I forget the web developer’s best friend, Firebug (By the way, I never wrote about Firebug! I will publish an article soon!). CSS Usage is an extension of Firebug. It can scan multiple pages of your website to find which CSS rules are actually being used in the site. Once you have installed Firebug from Firefox Addons page, you can also install the CSS Usage Extension. CSS Usage shows up as a tab within Firebug. It has options to either “Scan” the current page or select “Autoscan” to keep analyzing multiple pages from the website. On scan, it lists all the stylesheets added to the page, with one one’s being used on page highlighted in green and the unused one’s highlighted in red. When you move to next pages, the selectors previously found on other pages are colored in dark green.

Google Chrome Developer Tools – Audits

Arguably, Google Chrome Developer Tools is the most powerful tool for the developers to evaluate their work. Elements and Resources are the most popular tabs in the Developer Tools. The relatively unnoticed “Audits” tab of the Developer Tools runs an audit/scan on the current webpage and suggests the unused CSS rules that can be removed. Additionally, it also recommends the optimization based on order and positioning of style and script files.

Helium-CSS

Helium-CSS is a JavaScript based tool that discovers unused CSS across many pages on a web site. To use Helium, you need to add the helium source file in the header file of your website. Helium doesn’t support cross domain CSS and XML sitemaps. It is initiated by a JavaScript call (helium.init()) and doesn’t work on pages containing JavaScript errors.

CSSESS

CSSESS (pronounced as secess) is a bookmarklet that helps you find unused CSS selectors on any site. It is claimed to be built on the Helium-CSS. The developer also claims to have removed some of the flaws of Helium-CSS. Since, CSSESS is a bookmarklet, you have to drag the CSSESS link to your bookmarks. In your web browser, navigate to the webpage that you want to test and activate the bookmarklet.

CSSESS will scan all the URL links on the webpage and will allow you to select the URLs for scanning. Click Run. After completion of scan, it will list all the unused CSS selectors on each page.

Deadweight & CSS Redundancy Checker

Deadweight is a CSS coverage tool optimized for Ruby on Rails. It is installed as a Rails Gem. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and reports which can be “safely” deleted.

CSS Redundancy Checker is also a Rails Gem that can iterate over a list of HTML files to identify the CSS statements that were never called in the HTML page.

Other Options

GTMetrix is another online tool that analyses a URL and shows the ever reliable Google Page speed and YSlow performance results for the webpage.

CSS Cleaner is a Windows based utility for removing redundant CSS from the webpages of your web project. It can be downloaded from the host site.

The tools are really useful and help you improve the website performance. But, don’t forget to test all the changes locally before going live.