20

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.

Improve this question
3
  • 2
    stackoverflow.com/questions/8120048/… lots of tools here. Commented Aug 23, 2012 at 12:15
  • no, ther's no any good toll for this porpose, you can find some kind of toll (f.e. unused-css.com) for upgrading your code but it never works for 100% Commented Aug 23, 2012 at 12:17
  • hmm ... u sure? Then, it sounds like a fun project to do myself :D Commented Aug 23, 2012 at 12:17

2 Answers 2

Reset to default
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.

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

3 Comments

Where on earth is this Analyze option? I've been looking for 20 minutes!
Just use main menu Analyze -> Inspect Code in Intellij IDEA 2017
this still sucks though. if you have a lot of unused selectors you have to remove them one at a time. so tedious. and nothing has been done to fix what should be an easy enhancement. youtrack.jetbrains.com/issue/WEB-29209
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

Improve this answer

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.