When designing a website, we often, pick bits and pieces from some old CSS files and keep adding the new selectors as well. Time and again, there are changes and additions in the UI. This leaves the final CSS in a mess. The frequent chipping and chopping of selectors creates many unused classes in the CSS. Those are additional overheads on page load time and thus, affect the performance of the website. At the same time, it’s not easy to identify each of the unused classes. A class put in some common CSS section/file and unused on one page may be in use on any other webpages. There are developer tools (both online and offline) to save you from the headache of identifying the unused CSS. Until now, I was using Firefox Extension called Dust-Me Selectors. But, I found few other interesting options. I am listing the tools that can be used to find the unused CSS.
Dust-Me Selectors
Starting with my favorite! Dust-Me Selector is a Firefox Extension for Firefox 1.5 or later. It allows you to find unused CSS selectors on the page you are viewing and then compare it with the subsequent pages. It extracts all the selectors from all the stylesheets on the webpage you are viewing. Then, it analyses the webpage to list out unused selectors. The list of unused selectors is then stored for testing subsequent pages.
Dust-Me Selectors comes with an option to test individual pages or spider entire website. In either case, you will get the profile of the selectors that are not used on the website. The spider dialog gives you an option to input the URL of the XML or HTML sitemap of the website.
Furthermore, the Dust-Me Selectors allow you to add Stylesheet rules. You can test the redundancy of simple selectors like <p>, <ul> etc. It also gives you an option to account for common CSS hacks and ignore query strings.
You can install the Firefox Extension from the official Mozilla Addons site. The source code of the tool is also available at the Sitepoint website.
Liquidcity CSS Cleaner
Liquidcity CSS Cleaner is a PHP script that uses the regular expressions to identify the CSS on a webpage. It gives you the list of unused CSS classes by comparing the CSS classes with the HTML code. Then, you can manually remove those redundant classes. The script is available at the project page on the Gosquared website.
Unused CSS
Unused CSS is an online service that explores the webpages on the website, finds the unused CSS selectors and creates new clean CSS file that you can download. It will ask you to login to the pages requiring authentication. Nowadays, CSS is also being defined and modified in the JavaScript. The Unused CSS also searches for CSS rules in the JavaScript files.
The architecture is quite simple. Unused CSS examines the webpages, retrieves all the CSS classes and makes a list of CSS selectors. It then, tests the HTML and JavaScript for the presence of the listed selectors. Each selector that is found in the crawling is marked as found. At the end of the process, a list of unused selectors is left. The Unused CSS service writes a new CSS file after eliminating the unused CSS selectors from the original files.
There are few other browser extensions and Windows applications that perform the CSS cleaning. We will explore those tools in a later article planned for coming Saturday.
Follow Us