Ever been in a situation where you made some beautiful changes to your CSS, pushed it to the production only to realise the browser still renders the same old CSS? 🤔

This could be due to caching. Browsers, CDNs, servers – all do some level of caching by default. As a result, any changes you make to your application may not reflect immediately to your users. 😢

In this case, if the changes to your CSS are not reflected in the browser, you can try adding a query to the style sheets’ href. E.g.

<link rel="stylesheet" href="static/style.css?v=0.1">

The query itself can be arbitrary and need not necessarily mean anything. But, this has to be changed every time you are making changes to your CSS.

Cloudflare has a few options for caching one of which is Standard. It requests the updated file from your server every time the query string changes. As a result, CloudFlare CDN will cache the latest files when you make changes. 😃

This won’t be a problem in applications that involve a build step though, because the build files are automatically prefixed or suffixed with some random string every time.