CODEWITHSUNDEEP
javascriptasp.netcss
M.Azad
M.Azad

Reputation: 3763

Find unused CSS rule and js script in a web project?

HI.. My project has many CSS roles and JavaScript scripts that are not used in my project. How can I find these unused files?

Upvotes: 11

Views: 15804

Answers (2)

Spudley
Spudley

Reputation: 168655

There is a nice little firefox plugin called Dust Me Selectors, which scans a page for CSS which isn't being used.

It's a very good tool for spotting things in your stylesheets which are redundant.

However, you still need to be careful with it, as it is quite possible for a stylesheet to be unused when you run the program, but still necessary for your site - ie it could be used for dynamic content, or for other pages which share the same stylesheet code, etc.

[EDIT]

I've removed my previous edit where I noted that this project might have been abandoned, because in fact it looks like it's back in active development. Good news all round.

Upvotes: 10

T.J. Crowder
T.J. Crowder

Reputation: 1074038

When I've needed to do this, I've used the search feature of the dev environment to search all files in the solution for the filename of the file I suspected wasn't used. If it didn't get found, or got found only within the file itself, I knew it wasn't used, since the files have to be referenced (via a script or link element, or in a script that combines and minifies them) to be used.

Of course, if you're building filenames up from component parts, that won't work. For instance, if you have code with a variable basename containing "foo" and then code outputting a script tag like:

<script src="<%=basename%>-bar.js"></script>

...then my search for "foo-bar.js" won't find it. If that's a real possibility in your code, you'll have to find all the script and link elements and check them yourself...

...or experiment: Deploy your solution, and on the server, delete each file you think might not be used, refresh on the browser, and look for 404s in the console.

...all of which relates to unused files. If you think the files are referenced, but their contents aren't used, you'll either need to selectively remove the references and see what breaks (blech, a manual and error-prone process) or you'll need a code coverage analysis tool. This question here on StackOverflow discusses code coverage analysis tools for JavaScript, and Spudley's answer here points to a "code coverage" (for lack of a better term) tool for CSS.

Upvotes: 8

Related Questions