Detect unused CSS rules

Question

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.

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? — BoltClock, Sep 14 '11 at 00:23
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... — Joseph Silber, Sep 14 '11 at 00:25
http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions — Joseph Silber, Sep 14 '11 at 00: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. — fvu, Sep 14 '11 at 00:33
Check the author's website for an updated v3.0 that he just posted a few weeks ago at http://www.brothercake.com - there is even a version for Opera. — Funka, Feb 08 '12 at 00:50
I made a tool that does a pretty good job. Here's my [Code Pen](http://codepen.io/tmorrow-hyphensolutions/pen/GprdRQ) — toddmo, Sep 30 '15 at 20:12
@toddmo Thanks! would be good if you put it on github and make it easy to use for others (: — Shahin, Oct 01 '15 at 12:17
@shaahin, thanks. What did you have in mind? A bower component that you can then call a function like `usedCssRules(html,css)`? What interface are you looking for? — toddmo, Oct 01 '15 at 15:23
I use a grunt task for it - purifycss. Unlike other tools the big advantage is that it also takes care of js-files which also can add css ids or classes — user2718671, Sep 16 '16 at 14:40

score 35 · Accepted Answer · answered Sep 14 '11 at 00:26

35

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

Open the page in Chrome
Open developer tools (Ctrl+Shift+I)
Open the Audits tab
click run
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

answered Sep 14 '11 at 00:26

Joseph Marikle

76,418
17
112
129

2

Thank you so much, but it scans current page , right ? – Shahin Sep 14 '11 at 00:39
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. – Benjamin Atkin Jun 23 '12 at 23:15
4

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. – Joel Murphy Mar 19 '13 at 21:43
5

Use CSS Usage (Mozilla Firebug AddOn), that will create a new css excluding the unused css – Kishore Kumar Apr 01 '13 at 17:18
For multiple pages, you may want to try [mincss](https://github.com/peterbe/mincss). It is a python script that checks multiples pages for redundant CSS rules and outputs a cleaned CSS file. – hazerd Aug 14 '13 at 07:58
The FF Addons does not download the cleaned CSS... – Giacomo Paita Jul 10 '15 at 12:46
1

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., https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh/reviews?utm_source=chrome-app-launcher-info-dialog – Zeni Apr 25 '16 at 08:33
The CSS remove and combine turned out effective – netfed Aug 04 '16 at 23:48

Detect unused CSS rules

1 Answers1

Linked