Find out what CSS styles are being used on a given

Question

I have a page that contains multiple stylesheets and a large majority of the styles in it aren't actually used in the page (deprecated etc). I would like to export a new stylesheet containing all styles on the page that are actually in use. Is there anyway to do this?

Answer 1

In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :

Answer 2

I had this same issue, complicated by the fact that the pages I need to analyze are login-only, and for work, so I cannot provide my login to an external app (which is how unused-css.com crawls pages behind a login wall).

I found two Chrome extensions:

1. CSS Remove and Combine
2. unusedCSS

I only used the first, as it did the trick nicely. It counted CSS elements on the page, told me how many were used and unused, and let me download a stylesheet of all used elements. It did not seem to include functionality for browsing around a site and accumulating seen elements, it was just on a page-by-page basis, but it still let me prune 450 down to 150.

Answer 3

I found this : http://unused-css.com/

Features

• Explore the pages of your site automatically, find the unused CSS selectors and create new clean CSS files you can download
• Authenticate and explore the pages requiring authentication. It will then check unused CSS rules.
• Search for CSS rules in javascript files
• Customize the list of CSS selectors to keep
• Preview the change made to the CSS file
• Follow CSS import commands
• Set a user agent for the crawler

But i am not sure this would be a good idea, something like : javascript trigered selectors, contextual display, code conditional layout ... So, be carefull if you attempt to 'batch' work your .css files.

Answer 4

I think this website does what you want: CSS Trashman. It takes a little while to run, but it works. It reduced my personal site's CSS from 3.31 KB to 402 Bytes.

If you would rather use a command-line tool, CSS Rationator powers CSS Trashman.