css（层叠样式表）作为前端开发中最基础的技术之一，经常被用于美化网站页面，优化用户体验。然而，当网站开发者在调试 css 样式时经常遇到一个问题：css 文件不缓存。
什么是 CSS 缓存？
在访问网站时，服务器会向浏览器发送一些静态资源，如 HTML、CSS、JavaScript、图片等文件。为了提高页面加载速度和用户体验，浏览器会缓存这些文件，以便下次访问同一页面时能够更快地加载。这种缓存机制被称为 HTTP 缓存。
当用户第一次访问页面时，浏览器会下载所有的静态资源，并将它们保存在本地缓存中。在用户再次访问页面时，浏览器可以直接从缓存中读取这些文件，而不需要重新下载它们。这可以提高页面加载速度，减少服务器负担。
为什么 CSS 文件不缓存？
立即学习“前端免费学习笔记（深入）”；
然而，有时开发者在修改 CSS 样式时，发现浏览器并没有更新页面中的样式，而是仍然加载之前的缓存文件。这就是 CSS 文件不缓存的问题。
造成这种问题的原因是 HTTP 缓存机制的工作原理。当浏览器请求一个静态资源时，它会带上一个请求头 If-Modified-Since，该请求头为服务器传回该资源的 Etag 值。服务器会检查这个请求头，如果浏览器本地的缓存尚未失效，服务器会返回 304 状态码，说明该文件可以从本地缓存中获取。因此，即使开发者更新了 CSS 样式，但如果浏览器仍然带着旧的请求头请求该文件，服务器仍会返回 304 状态码，导致浏览器不会更新 CSS 样式。
如何解决 CSS 文件不缓存的问题？
- 清除浏览器缓存
开发者可以通过清除浏览器缓存来解决 CSS 文件不更新的问题。在 Chrome 浏览器中，可以通过在地址栏输入 chrome://settings/clearBrowserData 打开清除数据页面，选择清除浏览器缓存和 Cookies 数据，然后点击“清除数据”按钮。
- 在 URL 中加入版本号
开发者可以在 CSS 文件的 URL 中加入版本号，以保证浏览器能够获得最新的文件。如 ../style.css?v=1.0，在修改了样式后，将版本号改为其他的数字或者时间戳，浏览器会认为这是一个新的文件，从而更新样式。这种方式需要手动修改文件链接，适用于较小的项目。
- 设置 Cache-Control 和 Pragma
开发者可以在服务器端设置 HTTP 响应头中的 Cache-Control 和 Pragma，以控制浏览器缓存资源的时间和方式。例如，将 Cache-Control 设置为 no-cache 或 max-age=0，Pragma 设置为 no-cache，表示浏览器不会缓存该资源，每次请求都会返回最新版本的文件。这种方式适用于较大型的项目和高流量的网站。
结语
CSS 文件不缓存的问题是前端开发中常见的问题，但通过清除浏览器缓存、使用版本号和设置 Cache-Control 和 Pragma 等方法，用户可以解决这一问题，提高网站加载速度和用户体验。
