基础css必须先加载且只含重置规则和全局最小公约数，禁止含业务类名或固定字号；业务css须后加载以安全覆盖，混入顺序错误会导致box-sizing失效、字体继承异常等致命问题。
因为基础CSS必须先加载、不能被覆盖，而业务CSS需要后加载、才能安全覆盖；混在一起引入会直接导致 box-sizing 被干掉、字体继承失效、链接下划线重现等低级但致命的问题。
基础CSS该放什么，不该放什么
基础CSS（常叫 base.css 或 reset.css）只做两件事：消除浏览器默认差异、定义全局最小公约数。它不是“通用样式池”，更不是“常用类集合”。
- ✅ 必须包含：
* { box-sizing: border-box; }、body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }、a { text-decoration: none; color: inherit; }、button, input { font: inherit; } - ❌ 绝对禁止：
.header、.btn这类带业务语义的类名；font-size: 14px这种固定字号（应放设计系统根变量里）；任何媒体查询或主题逻辑
业务CSS必须放在基础CSS之后加载
浏览器按 <link> 标签在 HTML 中的物理顺序解析 CSS，后加载的同权重规则无条件覆盖前者。!important 在跨文件场景下基本无效。
- 错误顺序：
<link href="home.css">→<link href="base.css">→<link href="antd.css">结果：所有组件的box-sizing都是content-box，间距错乱 - 正确顺序：
<link href="reset.css">→<link href="base.css">→<link href="components.css">→<link href="home.css"> - Vite/Webpack 中 JS 的
import './base.css'顺序 ≠ 最终 HTML 的<link>顺序，务必检查构建后生成的 HTML 源码
构建工具里怎么避免顺序被悄悄打乱
Webpack 和 Vite 默认可能把不同来源的 CSS 合并进同一个 chunk，或按 chunk id 排序插入 <link>，导致基础样式实际排在后面。
- Vite：在
vite.config.js中配置build.rollupOptions.output.manualChunks，把reset.css单独打成vendor-basechunk，并确保它最先注入 - Webpack：用
optimization.splitChunks.cacheGroups显式命名基础样式 chunk，设priority: 100，防止被懒加载 chunk 提前插入 - 最稳妥方案：放弃 JS 中
importCSS，全部改用 HTML 模板中显式<link>，由模板控制顺序
真正容易被忽略的是：基础层和业务层不是“写在哪”的问题，而是“谁依赖谁”的契约——业务层可以假设 box-sizing 已生效、a 已去下划线；一旦这个契约被构建流程破坏，所有后续样式都会无声崩塌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
