多个html页面只加载自己需要的css，最简单方式是在各页面head中用link引入对应css；构建工具可自动提取公共部分，需手动控制路径与顺序，并通过shared.css复用通用样式、专属css后置覆盖。
多个 HTML 页面怎么只加载自己需要的 CSS
直接在每个页面的 里用 <link rel="stylesheet"> 引入对应 CSS，是最简单、最可控的方式。构建工具（如 Vite、Webpack）能帮你自动提取公共部分，但路径和加载顺序得你来定。
- 每个页面的 HTML 独立声明所需样式，比如
index.html引css/home.css，about.html引css/about.css - 把复用率高的规则抽成
css/shared.css，所有页面都先引入它，再引入各自专属样式：<link href="css/shared.css"> <link href="css/about.css"> - 避免在
shared.css里写高权重选择器（如div#main .card p a），否则后续页面很难覆盖；优先用语义类名（如.card-title） - 如果某个页面完全不需要某类样式（比如后台页不用动画），就别引入对应的 CSS 文件——删掉那行
<link>就行，比在 CSS 里写display: none更干净
为什么用 @import 在 CSS 里引入公共样式会变慢
@import 是串行阻塞加载，浏览器必须先下载并解析完当前 CSS 文件，才能发起下一个 @import 的请求。实际网络面板里常看到 main.css → reset.css → utils.css 这样的长链路，首屏渲染被拖慢。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要在主 CSS 文件顶部写
@import 'reset.css'; @import 'base.css';—— 它不支持并行下载，也不支持media属性 - 构建工具中推荐用 JS 侧
import '@/styles/reset.css'，或预处理器的@use（Sass）/@forward（Less），它们能在打包时合并、去重、压缩 - 真要用原生
@import，仅限组件级 CSS 内部导入强依赖的工具文件（如mixins.css），且确保它在文件最开头、同域、无条件
动态加载 CSS 文件要注意 FOUC 和重复加载
用 JavaScript 创建 <link> 标签注入样式，能实现真正按需，但时机不对就会闪一下白屏（FOUC），或者用户反复操作导致同一份 CSS 被加载多次。
- 插入
<link>后最好监听load事件再触发 DOM 渲染，比如模态框打开前先加载其样式：link.onload = () => showModal() - 加个缓存 Map 避免重复请求：
if (!loadedCSS.has(href)) { loadCSS(href); loadedCSS.add(href); } - 慎用
document.write或内联<style></style>注入大量样式——不利于缓存，也绕过浏览器对 CSS 的优化机制 - 移动端尤其要注意：某些安卓 WebView 对动态
<link>的渲染有延迟，建议搭配rel="preload"提前触发下载
构建工具里怎么让不同页面用不同 CSS chunk
Vite 或 Webpack 默认会把所有 import './style.css' 合并进一个 style.css，但你可以通过配置入口点，让每个 HTML 输出独立的样式块。
- Vite 中，在
vite.config.ts的build.rollupOptions.input显式列出各页面入口：input: { home: 'src/pages/home.html', admin: 'src/pages/admin.html' } - 确保每个页面的 JS 入口（如
home.ts）里只import自己需要的 CSS，公共部分统一从shared.css导入 - 检查打包后生成的
home.***.css是否包含大量冗余规则——若重复率高，说明没抽好公共样式，得回退一步重构shared.css的粒度 - 上线前务必验证：打开 Network 面板，过滤
css，确认每个页面只加载了自己该加载的文件，且状态码是200或缓存有效的304
shared.css 还是 checkout-step2.css 里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
