Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

David Odum
David Odum
1,860 Points
Posted by David Odum
David Odum
1,860 Points

If you use Cloudflare or another CDN and are having trouble seeing CSS updates, read this.

This was pretty frustrating for me so I figured I'd post here just in case others have this problem.

I installed a Wordpress test site to play around with in a folder on a site I already have. This site uses Cloudflare. I was not seeing updates to CSS files take effect.

What I had to do for past changes was go to the Cloudflare account for my parent site and purge the entire cache. Then for changes I made after that I just turned developer mode on.

Hope this helps.

1 Answer

Kai Nightmode
Kai Nightmode
37,045 Points
Kai Nightmode
Kai Nightmode
37,045 Points

Not specific to CloudFlare but it sounds like you may benefit from a "cache busting" strategy. This involves a tiny bit of extra work as a developer to force downloads of your latest and greatest CSS.

One of the easiest ways to implement cache busting is to simply add a query string to the end of your CSS URL. For example, if your CSS was setup like this...

<link rel="stylesheet" href="css/style.css">

You could force an update for all users who have already downloaded "css/style.css" by adding a query string to the end of the URL. For example...

<link rel="stylesheet" href="css/style.css?v1">

With the query string addition "?v1" above, everyone (including CloudFlare) will assume that the file is completely new and something that has not been seen before. They'll get your latest changes and you won't have to pull your hair out wondering why someone isn't seeing your updated CSS.

Now, let's say you found out about a bug, made a CSS fix, and want to deploy immediately, bypass any caching. Simple. Using the scheme above we could simply increment the number after the v (short for version) to the next number. In our case the code would look like this...

<link rel="stylesheet" href="css/style.css?v2">

Just keep incrementing the number when you want your latest changes to go out and you are golden. No need to have CloudFlare in development mode or worse, have to flush the cache. Just update your CSS links and you are set. Easy mode activated.

There are other methods of cache busting but I am partial to the above for ease of use and understanding. Just a simple v (for version) and a number that you increment. Easier than ?date=YYYY-MM-DD formats or more complex .htaccess / file renaming solutions.

Oh and once you harness the power of cache busting on CSS you can use it on JS, images or anything else you link to. A nice new tool for your web toolbox. :D

Cheers!