423

A bunch of CSS files were pulled in and now I'm trying to clean things up a bit.

How can I efficiently identify unused CSS definitions in a whole project?

NoDataDumpNoContribution
  • 10,591
  • 9
  • 64
  • 104
jswanson
  • 16,244
  • 6
  • 20
  • 15
  • 8
    possible duplicate of [How can I find unused images and CSS styles in a website?](http://stackoverflow.com/questions/33242/how-can-i-find-unused-images-and-css-styles-in-a-website) – ChrisWue Jun 07 '12 at 08:25
  • 4
    This question is discussed on [Meta](https://meta.stackoverflow.com/questions/402039/does-this-question-need-a-historical-lock). – NoDataDumpNoContribution Oct 14 '20 at 08:54

3 Answers3

264

Chrome Developer Tools has an Audits tab which can show unused CSS selectors.

Run an audit, then, under Web Page Performance see Remove unused CSS rules

enter image description here

Tarnay Kálmán
  • 6,907
  • 5
  • 46
  • 57
Derek Adair
  • 21,846
  • 31
  • 97
  • 134
  • 65
    that is awesome, but too bad you can't run it on a group of pages (otherwise unused CSS rules might be inevitable) – Damon Feb 02 '12 at 22:03
  • 17
    I run the auditing tool and it shows me the unused css, but how to use it then? Do I have to manually search each item and remove it? – Timothée HENRY Feb 27 '13 at 14:35
  • will the auditing happen to the current page or to all pages of the site? – Mr_Green Apr 10 '14 at 06:50
  • 20
    It's only current page. It says '2445 rules (83%) of CSS not used by the current page', so not really helpful. – chhantyal Feb 02 '15 at 15:20
  • 8
    When you expand the item, you get a list of actual rules not in use. Although, it's not helpful on sites where you change DOM on-the-fly. – Howie Feb 07 '15 at 13:48
  • 1
    Looks like this feature is removed now that google-chrome has replaced audits with google lighthouse – Brian Heese Jul 06 '18 at 23:48
  • this is not possible anymore. Chrome uses lighthouse now and it doesn't show which CSS rules are actually not used anymore – spankmaster79 Jul 17 '18 at 14:36
  • 12
    Actually this has just been moved to coverage - go to audits -> next to Console at the bottom there is a menu (3 vertial dots type menu) and you can select coverage there. Just click record and navigate. – GrahamTheDev Jul 26 '18 at 09:20
  • 3
    Voting down cause this is not accurate to date. – Jonny Mar 08 '19 at 08:16
  • 1
    Also you have to be careful with that. Some elements like :hover are shown as unused before you actually hover over the element. Also there is the possibility that HTML elements are loaded dynamically -> Audit thinks it is unused. – Denis.Sabolotni Jun 08 '19 at 20:31
66

I have just found this site – http://unused-css.com/

Looks good but I would need to thoroughly check its outputted 'clean' css before uploading it to any of my sites.

Also as with all these tools I would need to check it didn't strip id's and classes with no style but are used as JavaScript selectors.

The below content is taken from http://unused-css.com/ so credit to them for recommending other solutions:

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.

Topstyle is a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.

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.com 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.

Community
  • 1
  • 1
megaSteve4
  • 1,760
  • 1
  • 17
  • 24
  • 6
    just a note that unused-css.com don't let you download the CSS without you being a paid member and lowest plan starts at $29 a month! seems a bit expensive for the service to me – georgiecasey Oct 08 '16 at 19:56
  • 1
    I would add purifycss https://github.com/purifycss/purifycss to the mix. It is free, quite popular (according to stars in github) and works with single-page apps. – Dmitry Gonchar Jul 12 '17 at 08:17
2

Google Chrome Developer Tools has (a currently experimental) feature called CSS Overview which will allow you to find unused CSS rules.

To enable it follow these steps:

  1. Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
  2. Head over to DevTool Settings (Function+F1 on Mac; F1 on Windows)
  3. Click open the Experiments section
  4. Enable the CSS Overview option

enter image description here

John Conde
  • 217,595
  • 99
  • 455
  • 496