Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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!