I'm currently working on a 100,000 page website, the current design has been in place for over 5 years and successive updates have resulted in four 12,000+ line CSS files.

Obviously the CSS has bee unwieldy, many of the styles are duplicated and it's nearly impossible to know how many of the styles are actually being used.

We can minify, but this isn't really tackling the problem, just delaying the inevitable re-work.

So three questions are there any tools out there for...

• de-duplicating large CSS files?
• scanning the site and logging CSS class and ID use?
• could such scanning be achieved with a script of some kind, Greasemonkey maybe?

I'm currently working on a 100,000 page website, the current design has been in place for over 5 years and successive updates have resulted in four 12,000+ line CSS files.

Obviously the CSS has bee unwieldy, many of the styles are duplicated and it's nearly impossible to know how many of the styles are actually being used.

We can minify, but this isn't really tackling the problem, just delaying the inevitable re-work.

So three questions are there any tools out there for...

• de-duplicating large CSS files?
• scanning the site and logging CSS class and ID use?
• could such scanning be achieved with a script of some kind, Greasemonkey maybe?

• javascript
• css
• regex

• 1 You could definitely scan your site with a script of some kind. You could scan your HTML to determine every ID and CLASS that's used, so that you could eliminate unused stuff from your CSS files. You could definitely deduplicate your CSS with not much programming. But this is a large site, with large CSS files, and there's no getting away from the fact that it will be a large job, even with tools to streamline some of the processes. Good luck with it. :-) – Graham Commented Feb 26, 2012 at 14:45
• 100000 pages with different CSS, or one CSS file for 100,000 pages with the same lay-out? The approach really depends on how your files are structured. See this related question: stackoverflow./questions/6650146/css-find-unused-css – Rob W Commented Feb 26, 2012 at 15:06
• How did you reach 100,000 pages? Even the most plex sites like facebook use 500 pages TOPS. – Madara's Ghost Commented Feb 26, 2012 at 15:34
• 3 @Truth, I worked at a large media site a few years ago. They had a news desk, multiple articles in different categories published daily, pages for each television show they produced. Their CMS would build static HTML for easier caching. When they migrated to a new CMS, they needed to build import filters for each of the page formats they had used over the previous 12 years of web publishing. That site also had over 150k pages. Believe me, it's not hard if you're an actual content provider and started building content before modern best practices came into being. – ghoti Commented Feb 26, 2012 at 15:38
• Although you could theoretically do this with Greasemonkey scripts, that would not be a wise. It would be like trying to hammer a nail with a screwdriver. GM would face all kinds of hurdles and process everything in slow browser JS. The answers, ments, and linked questions have much better approaches. – Brock Adams Commented Feb 26, 2012 at 23:32

2 Answers 2

http://unused-css./ Does some of what you ask, and they have this to say:-

Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.

Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.

Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.

UnusedCSS. is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The @import statement is not supported. You can't configure and download the new clean CSS file.

CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.

If you are using Visual Studio, this extension helps to auto-merge css classes.