Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tool for checking unused CSS selectors?

I know there is an extension called Dust-Me Selectors for Firefox and also that it doesn't look at dynamic HTML generated by JavaScript.

I'm looking for tool(s) that can identify all unused selectors from a stylesheet, attached to several pages, with all the JavaScript running and checking selectors? The only option I know right now for this is manually checking files and finding unused selectors :(

In IDE's - I believe NetBeans provides a warning message when writing Java code, if a library is not under use. Without an IDE (NetBeans, Eclipse, Dreamweaver, etc) plugin to search for the selectors what are my options?

Also, is there a tool to check for unused selectors in the same file. I mean if all the JS, HTML and CSS code is in the same file.

like image 246
Arjun Bajaj Avatar asked Oct 31 '11 18:10

Arjun Bajaj


People also ask

How do you inspect unused CSS?

The Coverage tab in Chrome DevTools can help you find unused JavaScript and CSS code. Removing unused code can speed up your page load and save your mobile users cellular data.

How do I clear unused CSS?

If you want to remove unused CSS entirely, you can use a tool such as PurifyCSS to find out how much CSS file size can be reduced. Once you get the CSS code you should eliminate, you have to remove it manually from the page.

How do you check unused CSS lighthouse?

Open the Code Coverage Tab in Google Chrome and view per CSS file which declarations you do not need. Open the CSS file on the server (or locally) and check each unused CSS declaration . Determine whether it can be removed.


1 Answers

I think that http://unused-css.com will do exactly what you want.

https://github.com/geuis/helium-css can help

as well as: http://razorfast.com/2010/11/21/announcing-cssess-the-bookmarklet-that-finds-unused-css-selectors/

like image 170
Michael Durrant Avatar answered Oct 25 '22 17:10

Michael Durrant