Removing unused CSS from website code

Question

I am currently modifying a website template which I have found for free on the web.

When i remove, for instance, a div from the code, the CSS for it remains behind, in one or more files.

Is there a tool which automatically removes unused CSS from my code? So i don't manually search for every id and class that i don't use anymore and remove the code.

http://stackoverflow.com/questions/8120048/how-to-clean-up-styles-in-a-large-web-site/8120163#8120163 lots of tools here. — Kyle, Aug 23 '12 at 12:15
no, ther's no any good toll for this porpose, you can find some kind of toll (f.e. http://unused-css.com) for upgrading your code but it never works for 100% — Lukas, Aug 23 '12 at 12:17
hmm ... u sure? Then, it sounds like a fun project to do myself :D — AndreiBogdan, Aug 23 '12 at 12:17

score 25 · Answer 1 · answered Aug 23 '12 at 12:26

Intellij IDEA can do this. Navigate to CSS file, click on 'Analyze' and then reduce the analysis scope to a selected file. After that you will be presented with all problems related to this file. All errors are divided into categories, navigate to the category named 'Unused CSS selector' to find what you're after. The same should work for JavaScript. Please note that CSS support is only available in Ultimate version of IDEA, though it's totally worth every buck you spend on it. There is also a 30-day trial period for Ultimate edition. Oh, and by the way it has an excellent PHP support. There is also a cheaper PHP-specific IDE from the same vendor called PHPStorm. Analysis features are also available there.

Where on earth is this Analyze option? I've been looking for 20 minutes! — Christoffer, Jun 03 '15 at 14:28
Just use main menu `Analyze -> Inspect Code` in Intellij IDEA 2017 — Andrei Krasutski, Oct 18 '17 at 10:58

score 12 · Accepted Answer · answered Aug 23 '12 at 12:28

12

You can get pretty close to what you are asking for with the Google Chrome's Audit tab under Developer Tools. It does not remove unused CSS, but it will show you what CSS rules are not being used.

Observe: enter image description here

answered Aug 23 '12 at 12:28

shanabus

12,989
6
52
78

15

I've always questioned the usefulness of that feature, as it only shows unused rules on the current page - which is pretty useless for multi pages sites (wich are the vast majority) if you ask me. – Jan 24 '14 at 13:12

Removing unused CSS from website code

2 Answers2

Linked