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.
The Coverage tab in Chrome DevTools can help you find unused JavaScript and CSS code. Removing unused code can speed up your page load and save your mobile users cellular data.
1. Audit Tab: > Right Click + Inspect Element on the page, find the "Audit" tab, and run the audit, making sure "Web Page Performance" is checked. Lists all unused CSS tags - see image below.
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.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With