1

I am trying to use PurifyCSS to clean my style.css file. When I try it on static html file if works fine. See example of my CLI command:

purifycss wp01/wp-content/themes/mytheme/style.css index.html --min --info

But when I try to use it on live web (running on my localhost) I am getting incorrect results. Here is my command:

purifycss wp01/wp-content/themes/mytheme/style.css http://localhost/wp01/ --min --info

It outputs just very small part of my css-basically just css for my html and body tags.

What I am trying to do is something like this:

purifycss wp01/wp-content/themes/mytheme/style.css http://localhost/wp01/ http://localhost/wp01/another-page http://localhost/wp01/last-page --min --info

providing all pages of the web should output purified css without all the unneeded stuff.

1

Optimizing the CSS for WordPress is a time consuming job. You will have to consider all pages (404, archive, search, etc) as well as every possible element that you can think of, such as images, ordered lists, un-ordered lists, quotes, galleries, etc.

Not to mention that your theme might use some sort of AJAX or modal that could be loaded only on special events, such as errors or notification.

Still there might be some classes hidden from purifyCSS.

In my experience, I think it's better to first cover the WordPress generated classes and then browse the theme for classes, finding them and storing them in a separate CSS file, until you finish reviewing the theme.

Also you might want to look into functions.php file for possible shortcode and AJAX handlers, outputting HTML content.

As i mentioned, it's a really easy but time consuming task to accomplish, since the automated apps can't extract it all (at least on the front-side).

  • this^ and i is even worse than you describe since each page can have different meta that impacts page rendering and different sets of widgets. The only thing I disagree is about calling it "easy" as you basically need to iterate over all your pages which might not be very trivial – Mark Kaplun May 22 '17 at 17:37
  • It is a custom theme so I know of all the ajax etc. And I just want to use the tool to help me, not to do the whole job. I will manually check all the deleted css. – Juraj.Lorinc May 22 '17 at 20:05
  • @MarkKaplun By 'easy' i meant it doesn't need such skills and is not that complex. You just need patience and go through every possible combination of widgets, post types, etc to get it all, like when you are going to validate your HTML structure. – Jack Johansson May 22 '17 at 20:23
  • @Juraj.Lorinc You can still use purify CSS, and after checking all pages start to try different stuff like mark mentioned, and add the missing CSS rules from the original CSS file. – Jack Johansson May 22 '17 at 20:25
  • @JackJohansson I would like to use it, just don't know how :-) Nobody answered my question yet and I still was not able to figure it out myself. – Juraj.Lorinc May 23 '17 at 12:49
0

Someone did a write up on how to do this with Grunt with Roots.io's Wordpress theme framework. (Now called Sage) Here's the link in case it helps someone. https://cfxdesign.com/remove-unused-css-from-wordpress-automatically-with-grunt/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.