How to identify unused CSS definitions from multiple CSS files in a project

Question

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

User · Answer

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

User · Answer

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   Open up DevTools  Command Option I on Mac  Control Shift I on Windows  Head over to DevTool Settings  Function F1 on Mac  F1 on Windows  Click open the Experiments section Enable the CSS Overview option

User · Answer

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  quot safely quot  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

[css] How to identify unused CSS definitions from multiple CSS files in a project

Examples related to css

Examples related to performance

Examples related to optimization

Examples related to code-cleanup