Archived topic
Identify "unused CSS" and "not existing CSS" in child files
3 replies · Started by Walter Schwarz on December 15, 2020
Is there any feature implemented or plugin recommended to
1) identify "unused CSS" defined in child files and not used in html code (like online https://unused-css.com/),
2) identify "non existing CSS" in child files defined as class/id in html code?
I would like to use this in the development phase - and it's not to eliminate whole CSS-pages.
Thanks for any hint and support,
Walter
Hi,
Is there any feature implemented or plugin recommended to
To answer directly: No, we don't have this particular feature implemented.
As for recommendations:
In general, its best to use as less plugins as possible as too many of these can slow down the site.
That said, sites like you've mentioned or Chrome's devtool should help you identify how much is not being used.
If you must use a plugin, you can try Asset CleanUp plugin but we really can't guarantee its effectivity as it is a third party plugin.
Note: This is pretty tricky to do as there are dynamic CSS within the theme. That means you can't use only 1 page to CSS purge as some of them may not used on the page being tested but is used on another.
You can try following these articles but there's a chance you'll break the layout if you're not sure what you're doing:
https://wpspeedmatters.com/remove-unused-css-from-wordpress/
https://technumero.com/remove-unused-css/#Tools_to_detect_unusedused_CSS
Thank you Elvin.
I just want to clean my child CSS files. So there would not be a problem with "dynamic CSS within the theme", right?
And I will try your hints ...,
Walter
I just want to clean my child CSS files. So there would not be a problem with “dynamic CSS within the theme”, right?
Assuming you didn't dequeue or change anything on the default stylesheets of the parent theme then there shouldn't be that much of an issue as there's a fallback (the parent stylesheet). :)
