标签本身无模块化语义，但通过拆分 base.css、layout.css、components.css 等文件并按序引入，配合 media 控制加载时机、严格书写 rel="stylesheet" 和路径，可实现样式模块化管理。
<link> 标签本身不支持“模块化”语义，但它能支撑模块化样式管理的物理结构——关键不在标签有多智能，而在你如何组织 href 路径、控制加载时机、拆分关注点。
怎么用多个 <link rel="stylesheet"> 拆分样式职责
把一个大 style.css 拆成 base.css、layout.css、components.css、theme-dark.css 等文件，再分别引入，就是最直接的模块化落地方式。
- 每个
<link>对应一类关注点：重置规则放base.css，栅格和容器放layout.css，按钮/卡片等复用组件放components.css - 顺序不能乱：
base.css必须在最前，否则后续样式可能被重置规则意外覆盖 - 避免循环依赖：比如
components.css不该再@import一个已由<link>加载的base.css，否则冗余请求+解析冲突 - 构建工具（如 Vite、Webpack）可合并这些文件上线，开发期保留分离便于调试
media 属性不是“媒体查询”，而是条件加载开关
media 不是用来写 (max-width: 768px) 这种 CSS 规则的，它是告诉浏览器：“这个样式表只在满足条件时才下载并解析”。它不阻塞主渲染流，但影响实际生效时机。
-
<link rel="stylesheet" href="print.css" media="print">：仅在打印预览或调用window.print()时激活，不影响页面常规渲染 -
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">：只在视口 ≤480px 时加载，小屏设备省流量，桌面端跳过请求 - 注意：若用 JS 动态切换
media值（如从"(max-width: 480px)"改为"all"），浏览器会立即触发加载，但不会自动 re-calculate 已渲染元素——得手动force repaint或刷新 DOM -
media值写错（比如拼成mediia）会导致整个<link>被忽略，且控制台通常无提示
为什么 rel="stylesheet" 写错就等于没写
浏览器只识别严格匹配的 rel="stylesheet" 才会启动 CSS 解析流程。漏引号、大小写错误、多空格、拼写偏差，全都会让样式静默失效。
- ❌
rel=stylesheet（缺引号）→ IE 和部分旧版 Safari 直接忽略 - ❌
rel="StyleSheet"（S 大写）→ Chrome/Firefox 不识别，不报错，页面白屏或错乱 - ❌
rel="stylesheet "（末尾空格）→ 多数现代浏览器会 trim，但某些嵌入式 WebView（如 Cordova）可能失败 - ✅ 正确写法只有唯一一种：
rel="stylesheet"，小写、带双引号、无空格 - 路径
href错误（如 404）会在控制台报Failed to load resource，但rel错误连这条日志都不会有
动态插入 <link> 会绕过阻塞，但代价是 FOUC
用 JS 插入 <link rel="stylesheet">（例如 document.head.appendChild(linkEl)）确实能避免初始 HTML 解析阻塞，但用户大概率会看到几毫秒的“无样式内容闪现”。
- FOUC 在弱网或高延迟设备上更明显，尤其含字体、动画、复杂布局的页面
- 服务端渲染（SSR）场景下，动态插入还会导致 hydration mismatch：服务端生成的 HTML 假设样式已就绪，客户端却等 JS 执行完才加载，React/Vue 可能报
Hydration failed - 如果真要异步加载非关键样式（比如暗黑主题、第三方插件样式），建议用
rel="preload"预取 + JS 控制启用时机，而不是直接插入stylesheet - 真正安全的“动态样式加载”方案，是先插入
<link rel="preload" as="style" href="theme.css">，等需要时再改其rel为"stylesheet"
模块化管理的难点从来不在怎么写 <link>，而在于路径层级一变、环境一换（本地开发 vs CDN vs SSR）、media 条件一叠加，就容易漏掉某个 rel 的大小写，或者误以为 media 能响应式重计算——它只管加载时机，不管重绘逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
