生产环境应优先本地化第三方CSS，CDN仅在可控、有fallback且CSP允许时使用；本地引入须经构建流程生成路径，CDN引入必须含integrity和crossorigin属性，并确保fallback真实可验证。
生产环境优先本地化第三方 CSS，CDN 只在明确可控、有 fallback 且 CSP 允许时才用——不是“快不快”的问题，而是“稳不稳、安不安全、好不好查问题”的问题。
本地引入 CSS 必须走构建流程，不能直接写相对路径
直接写 <link rel="stylesheet" href="css/bootstrap.min.css"> 看似简单，但开发和部署时极易出错：
- 开发时路径对，上线后因子目录（如
/admin）或 base URL 变化，css/变成/admin/css/，404 - 构建工具（Vite/Mix/Webpack）会哈希文件名（如
app.a1b2c3.css），硬编码路径立刻失效 - public 目录外的资源（如
resources/css/）必须经构建输出，否则浏览器根本访问不到
正确做法是：用 @vite（Vite 项目）、{{ mix() }}（Laravel Mix）或 {{ asset() }}（Laravel）生成最终路径。例如：<link rel="stylesheet" href="{{ asset('css/app.css') }}">，它自动处理前缀、哈希和 public 映射。
CDN 引入必须带 integrity 和 crossorigin
不加 integrity 的 CDN CSS 是裸奔——CDN 被劫持、缓存污染、中间人篡改，你完全无法感知。浏览器也不会报错，只会静默加载坏文件，样式错乱或组件初始化失败。
立即学习“前端免费学习笔记（深入）”；
完整写法必须包含三项：
-
href：以https://开头的完整 URL，不能省略协议 -
integrity：对应 CDN 提供的 SRI（Subresource Integrity）哈希值，少一个字符就拒绝加载 -
crossorigin：设为"anonymous"，否则 JS 动态检测或加载时可能因 CORS 失败
示例：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
CDN 故障时 fallback 必须真实可验证
只写个 onerror 回退到本地，并不等于高可用。常见失效场景：
-
onerror只触发一次，多个 CDN 文件需分别写，维护成本高 - 回退路径用
asset()没问题，但若bootstrap.fallback.min.css实际没放进public/或构建未生成，页面直接白屏 - JS 动态加载 fallback 时，脚本执行顺序错位——比如 Bootstrap JS 在 fallback CSS 加载完成前就执行，
document.querySelector('.btn')找不到样式规则，组件初始化失败
真正可靠的 fallback 要满足三点：回退文件已存在并可 curl -I 验证；JS 加载逻辑放在所有依赖 CSS 的脚本之前；最好用 Promise.all() 等待 CSS 加载完成再触发后续逻辑。
混用 CDN 和本地 CSS 时，顺序和作用域不能靠猜
很多人以为 “CDN 放前面，本地放后面” 就万事大吉，但实际失效往往卡在两个细节：
- CDN CSS 里禁止出现
@import url('/css/custom.css')—— 浏览器跨域策略会静默丢弃，控制台无报错，样式彻底丢失 - 加载顺序 ≠ 生效顺序：如果本地 CSS 中某个选择器权重更低（比如只用
.btn），而 CDN CSS 里用了button.btn，哪怕本地 CSS 后加载，照样被覆盖
真正要盯的是：是否所有自定义规则都用了足够高的选择器权重（如加 body 前缀或 !important 仅限极少数覆盖点），以及是否在构建后检查了最终输出的 CSS 文件里，你的规则确实出现在 CDN 规则之后。
最常被忽略的一点：本地 CSS 构建后是否启用了内容哈希（content hash）？没开的话，浏览器强缓存旧文件，你改了样式却死活不生效，排查方向全错。
