link标签不支持原生CSS模块化，所谓模块化实为组织策略与属性组合模拟；@import在<style>中会延迟加载、串行阻塞、引发FOUC且无法动态控制。
link 标签本身不支持“模块化”语义，HTML 也没有原生的 CSS 模块系统；所谓“模块化开发”，实际是靠组织策略 + link 的属性组合来模拟职责分离，不是靠语法糖。
为什么不能用 @import 在 <style> 里“模块化”引入 CSS
你可能写过这样的代码：<style>@import url("header.css");</style>。它看似把样式拆开了，但本质是反模式：
- 浏览器必须先下载并解析整个
<style>块，才发起@import请求 —— 比<link rel="stylesheet">晚至少一个渲染周期 - 嵌套
@import（比如 A.css → B.css → C.css）会串行阻塞，Network 面板里能看到明显瀑布流 - 极易触发 FOUC（Flash of Unstyled Content）：页面先裸奔，再闪一下上样式，尤其在弱网或高延迟设备上
-
@import是 CSS 规则，不是 HTML 功能；它无法被 JS 动态控制、无法设置media条件加载、也不支持as类型提示
link rel="stylesheet" 怎么模拟模块职责
真正的模块化靠的是命名 + 层级 + 属性控制，不是文件拆分本身：
- 用
media区分场景：例如<link rel="stylesheet" href="print.css" media="print">只在打印时生效，不参与屏幕渲染 - 用
title+disabled实现可切换主题：如<link rel="stylesheet" title="dark" href="dark.css">，再用 JS 切换document.styleSheets[n].disabled - 按功能拆文件，但保持加载顺序合理：基础重置（
reset.css）→ 布局（layout.css）→ 组件（button.css）→ 主题（theme.css），避免后加载的样式被前序覆盖 - 不要为“模块化”而拆出 20 个
link：HTTP/2 下多请求开销小，但过多link仍会增加解析和阻塞链长度；构建时可合并非关键模块
link 放错位置的典型后果
link 必须在 <head> 内，这是硬性规则，不是建议：
立即学习“前端免费学习笔记（深入）”；
- 放在
<body>中的<link rel="stylesheet">：CSS 仍会下载，但**不阻塞渲染**，导致首屏无样式（FOUC），且后续内联样式可能覆盖它 -
<link rel="preload" as="font">放在<body>：浏览器直接忽略，Network 面板里根本看不到该请求 - 漏写
rel或写错（如rel="css"）：资源被下载，但浏览器不知道怎么处理 —— 不解析、不应用、无报错，静默失效 - 路径错误（如
href="css/main.css"而 HTML 在子目录）：404；用绝对路径href="/css/main.css"更稳，但需确认部署路径是否带子路由（如/myapp/），否则要配<base href="/myapp/">
最容易被忽略的一点：多个 link rel="stylesheet" 的顺序就是 CSS 优先级的实际顺序。哪怕你用了 BEM 或 CSS-in-JS，只要它们最终生成的是 <link>，顺序就决定谁能覆盖谁 —— 这不是开发阶段的抽象，而是运行时的真实链条。
