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.