28

I am developing a website.
I use ready template.this template contains many css files with many css rules.
But I have few pages and I am sure I didn't use all selectors.
Is there any tool exist for scanning project HTML files and finding unused css rules and remove them ?
I found this question that says :

Dust-me Selectors is a firefox plugin that finds unused selectors.

But its not compatible with FF6 and seems it just review current viewing page and not scans whole website files.

Improve this question
9
  • I probably see this exact title at least once a week on the front page. Are you sure you haven't found anything by searching Google or even this web site? What about the suggested duplicates when you entered the question title just now? Commented Sep 14, 2011 at 0:23
  • 1
    This is very tedious, but would work: search your CSS for all the selector (/}(.*){/), then run them through a loop in jQuery, and check if it matched anything... Commented Sep 14, 2011 at 0:25
  • stackoverflow.com/questions/135657/… Commented Sep 14, 2011 at 0:26
  • @all referring to answers mentioning dustmeselectors: that extension is NOT compatible with FF4+ and the release date keep slipping. So yes there are various answers all pointing to dms, and they're all useless until dms gets updated. Commented Sep 14, 2011 at 0:33
  • 1
    I made a tool that does a pretty good job. Here's my Code Pen Commented Sep 30, 2015 at 20:12

1 Answer 1

Reset to default
35

You can get a general idea with chrome's developer tools.

  1. Open the page in Chrome
  2. Open developer tools (Ctrl+Shift+I)
  3. Open the Audits tab
  4. click run
  5. expand the "Remove unused CSS rules" item to view a list of style sheets that contain unused style rules.

This doesn't list them out oh wait... it does... XD

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you so much, but it scans current page , right ?
I think I'll try cramming a bunch of pages into one temporary HTML file, just for the purposes of running this. My prediction is that it will be ugly but effective.
There needs to be an option to download a "cleaned" css file though! I have 4,133 unused css rules in one of my style sheets, and I really don't feel like cleaning the style sheet manually.
Use CSS Usage (Mozilla Firebug AddOn), that will create a new css excluding the unused css
There is also an extension for Crome "CSS remove and combine" which combine all the used css including inline css in one combined file. Found very useful., chrome.google.com/webstore/detail/css-remove-and-combine/…
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.