外部css加载顺序决定样式覆盖规则，应按reset→base→components→page顺序在head中书写link标签，禁用preload/async/@import，优先用media或class切换条件样式。
外部 CSS 样式表的加载顺序直接决定样式覆盖规则——后加载的样式会覆盖先加载的同名规则。所谓“顺序混乱”，通常不是浏览器随机加载，而是开发者未主动控制 <link> 在 HTML 中的书写顺序，或误用了异步/预加载等机制打乱了预期顺序。
确保 link 标签按预期顺序写在 head 中
浏览器按 HTML 文档中 <link rel="stylesheet"> 出现的先后顺序同步解析和应用样式。这是最基础、最可靠的控制方式。
- 把重置样式（如 normalize.css）放在最前面
- 接着是基础通用样式（如 typography、layout、utilities）
- 然后是组件级样式（button.css、card.css）
- 最后是页面/主题专属样式（home.css、dark-theme.css）
避免用 preload 或 async 加载普通样式表
rel="preload" 和 rel="prefetch" 不会阻塞渲染，也不参与样式层叠顺序；async 属性对 <link> 无效（仅适用于 <script></script>）。若错误使用，会导致样式延迟注入、顺序错乱甚至 FOUC（Flash of Unstyled Content）。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
慎用 @import，尤其在外部文件中嵌套
@import 在 CSS 文件内使用时，会触发额外 HTTP 请求，且必须在所有规则前声明。多个 @import 按出现顺序执行，但它们的加载是串行的，容易拖慢渲染，还可能绕过 HTML 中的 <link> 顺序逻辑。
- 不要在
page.css里@import "base.css"—— 这会让 base 的规则实际晚于 page 加载 - 如需复用，改用构建工具（如 PostCSS、Webpack）做合并，或保持纯
<link>扁平结构
用媒体查询或数据属性做条件加载，而非依赖加载时机
如果需要“按需覆盖”，比如暗色模式、打印样式，优先用 media 属性或 JS 切换 class，而不是靠加载顺序强行覆盖：
这样语义清晰，且不破坏主样式流的顺序稳定性。
