Find Unused CSS Rule and Js Script in a Web Project

find unused images, css rules, js script blocks

Unused CSS

1. Take a look at the Firefox extension Dust-Me at http://www.sitepoint.com/dustmeselectors/.

2. Google Chrome has a website auditing tool in their developer console.

3. Also I found this site for removing unused css - http://unused-css.com/ .
   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.

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

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

6. How can I find unused images and CSS styles in a website?

Unused Images:

1. http://obsidience.blogspot.in/2008/06/using-powershell-to-find-unused-images.html
2. How Do I Make a Bash Script To Find Unused Images in a Project?

Unused JS:

1. Find unused CSS rule and js script in a web project?
2. Find unused Javascript functions?

How can I remove unused CSS classes from my website project?

You might find this Firefox extension useful: http://www.sitepoint.com/dustmeselectors/

How to extract unused CSS/JS (not just purge) into a separate file?

Take a look at https://github.com/pocketjoso/penthouse for extracting the 'critical' CSS for a page, this will then go in your <style type="text/css"></style> tag.

I'd recommend then including all of your CSS in the CSS file via a link tag. This will mean it's the same on each page and can be cached by the browser.

Unused css - how do you clean it up?

Check out uCSS library from Opera Software.

It helps you to find unused CSS, as well as duplicate CSS. Also, you can get an overview of how many times each rule has been used in your markup. Several options are available by setting up a config file.

Update:

Another great alternative: csscss.

Written in Ruby and supports SASS, Less.

Update:

Another great alternative: uncss.

It works across multiple files and supports Javascript-injected CSS.

---

Related Topics