Why adding version number to CSS file path?

Question

I noticed some websites put the version numbers (especially) in the CSS file path. For example:

<link rel="stylesheet" type="text/css" href="style.css?v=12345678" />

What is the main purpose to put the version number? If the purpose is to remember when the CSS file was updated last time, shouldn't the version number added as a comment inside the CSS file?

Answer 1

From HTML5 ★ Boilerplate Docs:

What is ?v=1" '?v=1' is the JavaScript/CSS Version Control with Cachebusting

Why do you need to cache JavaScript CSS? Web page designs are getting richer and richer, which means more scripts and stylesheets in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets etc.

How does HTML5 Boilerplate handle JavaScript CSS cache? HTML5 Boilerplate comes with server configuration files: .htacess, web.config and nginx.conf. These files tell the server to add JavaScript CSS cache control.

When do you need to use version control with cachebusting? Traditionally, if you use a far future Expires header you have to change the component's filename whenever the component changes.

How to use cachebusting? If you update your JavaScript or CSS, just update the "?v=1" to "?v=2", "?v=3" ... This will trick the browser think you are trying to load a new file, therefore, solve the cache problem.