<link>顺序直接影响样式生效，因CSS从上到下解析，后引入样式覆盖同名规则；应按“重置→变量→组件→布局→页面”从底向上排列，并避免动态加载打乱顺序。
为什么 <link> 顺序直接影响样式生效
CSS 是从上到下解析的，后引入的样式会覆盖前面同名规则（层叠性）。如果 base.css 定义了 .btn { color: blue; }，而 theme.css 在它前面引入，那 .btn 的蓝色就永远不会生效——不是 bug，是规范行为。
如何快速定位顺序问题
打开浏览器开发者工具的 Network 面板，按 Initiator 列排序，看 CSS 文件加载是否符合预期；再切到 Elements 面板，选中元素，右侧 Styles 面板里被划掉的声明，点左侧文件名就能跳转到对应 <link> 标签位置。
- 被划掉但你认为该生效的样式 → 很可能被后面同名规则覆盖
- 文件名显示为
inline或style attribute→ 行内样式或 JS 注入，优先级更高 - 多个
!important并存 → 顺序失效，靠权重和声明位置决胜，应避免
调整 <link> 顺序的实操原则
把依赖关系“从底向上”排列：基础重置 → 通用组件 → 布局结构 → 页面特例。例如：
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="variables.css"> <link rel="stylesheet" href="button.css"> <link rel="stylesheet" href="header.css"> <link rel="stylesheet" href="home-page.css">
-
reset.css必须最前，否则后续所有 margin/padding 可能被干扰 -
variables.css（含 CSS 自定义属性）需在使用它的文件之前加载，否则var(--primary)会回退为初始值 - 页面级 CSS（如
home-page.css）放最后，确保它能覆盖通用组件样式 - 避免在
<body>中插入<link>—— 浏览器可能已开始渲染，导致 FOUC 或样式闪烁
构建工具里怎么管好顺序（以 Webpack 为例）
如果用 mini-css-extract-plugin，CSS 合并顺序由 import 语句决定，而非 HTML 中 <link> 位置。这时要检查 JS 入口文件里的导入链：
立即学习“前端免费学习笔记（深入）”；
import './reset.css'; import './variables.css'; import './components/button.css'; import './pages/home.css';
- 不要在组件内部
import全局变量文件（比如button.css里再import '../variables.css'），会导致重复注入和顺序失控 - Webpack 5+ 默认按模块依赖图排序，但动态
import()加载的 CSS 无法保证插入顺序，慎用于关键样式 - 用
optimization.splitChunks提取公共 CSS 时，注意chunks: 'all'可能打乱原始顺序，建议显式指定cacheGroups并设priority
<link>，而是当团队多人维护、组件库与业务代码混用、还叠加了 CSS-in-JS 或 Shadow DOM 时，样式来源变得不可见。这时候光靠顺序不够，得配合命名空间、scope 属性或 CSS 模块化方案。 
