多个HTML页面共享CSS应统一用根路径引入，小项目手动引入即可，大项目需构建工具集中管理；避免@import嵌套，优先用JS import或预处理器@use；CDN引入需配integrity与本地fallback。
多个 HTML 页面如何共享同一份 CSS 文件
直接在每个 index.html、user.html、admin.html 里都写一遍 是最常见做法，也最稳妥。关键不是“能不能”，而是“要不要抽象”——如果项目只有 3 个页面且 CSS 不常变，手动引入反而更可控；一旦页面超 10 个或需支持主题切换、按需加载，就得考虑集中管理。
- 路径必须统一：所有页面引用的
href应基于站点根目录（如/css/base.css），避免相对路径（../css/base.css）导致某些页面加载失败 - 不要用
标签内联关键样式：它无法被浏览器缓存，每次页面加载都重复传输，且不利于多人协作维护 - 如果用构建工具（Vite / Webpack），
index.html中的通常由插件自动生成，此时“手动引入”实际是配置入口 HTML 模板
使用构建工具自动注入 CSS（Vite/Webpack 场景）
当项目已用 Vite 或 Webpack，CSS 不该靠人手加到每个 HTML，而应通过入口机制注入。比如 Vite 默认只处理 index.html，其他页面（如 login.html）需显式声明为多页入口（multi-page entry）。
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
login: resolve(__dirname, 'login.html'),
admin: resolve(__dirname, 'admin.html')
}
}
}
})
这样每个 HTML 都会独立打包，并自动注入 main.css（来自 import './main.css' 或全局 @import）。但注意：login.html 和 admin.html 的 CSS 会被分别提取，若内容高度重合，会导致重复代码；此时应把公共样式抽成 shared.css，并在各入口 JS 中 import '@/styles/shared.css'。
避免 @import 嵌套引发的性能陷阱
@import 看似方便统一入口，比如在 main.css 里写 @import 'reset.css'; @import 'layout.css';，但它会阻塞后续 CSS 解析，且不支持并行下载——浏览器必须先下载并解析完 main.css，再发起 reset.css 请求。
立即学习“前端免费学习笔记（深入）”；
- 现代项目中，优先用构建工具的
import（JS 侧）或@use（Sass/Less）替代 CSS 原生@import - 如果必须用原生
@import，确保它出现在文件开头，且导入的都是同域资源；跨域@import在多数浏览器中已被禁用 - 检查 Chrome DevTools → Network → Filter “css”，看是否有长链路（如 main.css → reset.css → vars.css），这就是
@import嵌套的典型信号
CDN + 本地 fallback 的双保险方案
对通用 UI 框架（如 Bootstrap、Normalize.css），可结合 CDN 加速与本地兜底：
原理是：首屏加载 CDN 版本，同时静默加载本地 bootstrap-fallback.css（用 media="print" 避免阻塞渲染），加载完成后切回 media="all"。这样即使 CDN 不可用，页面样式仍能降级保障。但注意：integrity 属性必须和 CDN 提供的哈希严格一致，否则浏览器会拒绝执行。
真正难的不是“怎么引入”，而是“哪些该全局引入、哪些该局部作用域、哪些该按路由异步加载”。比如后台管理页的图表组件样式，就不该污染前台首页；这类边界一旦模糊，后期就只能靠 !important 和嵌套选择器硬怼——那已经不是管理，是救火了。
