CSS changes don’t show up

If you are making changes to the CSS files on your site and you've cleared the WP Rocket cache,  but you don't see the changes right away, it can be due to the Used CSS from the Remove Unused CSS or if you don't use this feature, because your CSS files are getting stuck in your browser's cache. In that case, you'll notice that no matter how many times you clear the WP Rocket cache, you still see the old file, and can only see the new one after clearing your own browser's cache.

Clear the Used CSS

This option is only available when Remove Unused CSS is enabled.

• You should use this option when you make changes to stylesheets, or add/modify custom CSS via the WordPress Customizer (or a plugin).
• It might be necessary to manually clear the Used CSS when theme options are changed.

Browser caching

For a more detailed information on how browser caching works, please read this article: 
https://wp-rocket.me/blog/browser-caching-explained-in-plain-english/

To give a very short summary of the issue and what's going on: 

Let's say you have a file: style.css
When you visit your website, your browser downloads that file and keeps a copy of it in it's local cache, ie. it lives on your computer, in that specific browser, not in the WP Rocket cache. 

When you update that CSS file, you need to let your browser know that it's been updated, otherwise it will say, "I already have style.css right here, no need to download it again, here it is....voilà!" and it shows you the old version.

To prevent this, usually files have a version number appended like this: 

style.css? ver=1

And when the file is updated, the version is updated: style.css? ver=1.1
This lets the browser know to download the new version instead of reusing the old, stored version.This is called "busting the browser cache".

How to bust the browser cache

Use Minify/Combine in WP Rocket

Activating either Minify or Minify/Combine in WP Rocket will perform cache busting. When those options are enabled, after making a change to your files, clear the WP Rocket cache and the filenames will then be updated. 

Note that this will only be applied where caching is applied. So if you are logged in to your site, without User Cache enabled, you won't see the effects.

Busting the cache without using minify/combine

We are providing this information as a guide - you must implement it yourself. 

The most important thing to do is always make sure the version number of your file is updated. You do that by simply changing the version number at the top of your stylesheet after you make a change: 

This version will be reflected in the new query string, triggering the browser to download the new version.

Note: If you have other caching layers like Cloudflare, Sucuri's CloudProxy, or a CDN service, you may also need to clear the caches there to see your latest CSS  updates.

Unique themes - Genesis, X Theme etc

When using some themes, like Genesis and its child themes, you have to do something a little different to update the stylesheet version. When using a Genesis child theme, the version number in the query string defaults to the version number of the parent theme. This is problematic because even if you update your child theme version, it doesn't change the query string. 

With Genesis, you have to add the following line to your functions.php and then update the version number here, instead of in the stylesheet:

define( 'CHILD_THEME_VERSION', '2.1.8' );

With X Theme you have to do something similar. You can find the details in their  forum (login required).