link是HTML标准标签，支持并行加载、全浏览器兼容、可DOM操作；@import是CSS规则，串行加载易导致FOUC、仅IE5+支持、无法动态控制，性能与兼容性均较差。
link 是唯一可靠、标准且浏览器普遍支持的 CSS 模块导入方式；@import 不是 HTML 功能，是 CSS 规则，性能差、易引发 FOUC，应避免在 HTML 中“模拟”使用。
为什么不能用 @import 在 HTML 里导入 CSS 模块
你可能在 <style> 标签里写过 @import url("module.css")，以为这是“模块化导入”。但这是错觉：@import 是 CSS 语法，不是 HTML 标签，它必须等包含它的样式表（比如 <style>）被解析后才发起请求——比 <link> 晚一拍，且串行加载。
常见错误现象：
- 页面先白屏/裸奔几毫秒，再闪一下才上样式（FOUC）
- 嵌套
@import（如 A.css @import B.css，B.css 又 @import C.css）时加载链拉长，首屏延迟明显 - 开发者工具 Network 面板里看到 CSS 请求排在 HTML 解析完成之后，而非并行
实操建议：
- 删掉所有
<style>@import ...</style>写法 - 把想“模块化”的 CSS 文件，改用多个
<link rel="stylesheet">并列引入 - 如果真要控制加载时机（比如暗黑模式切换），用 JS 动态创建
<link>并监听load事件，而不是依赖@import
link rel="stylesheet" 怎么实现“模块化”语义
HTML 本身没有“CSS 模块”概念，但你可以用 <link> 的 media、title 和加载顺序模拟模块职责。关键不是语法，而是组织逻辑。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 基础样式（重置、通用类）→
<link href="/css/base.css" rel="stylesheet"> - 组件样式（按钮、卡片）→
<link href="/css/components.css" rel="stylesheet"> - 主题样式（light/dark）→
<link href="/css/theme-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
注意点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
media属性不等于“不加载”，只是控制是否**应用**；浏览器仍会下载（除非匹配失败且用了preload优化） - 层叠顺序由
<link>在<head>中的**位置决定**：后写的规则可覆盖前面同优先级的规则 - 别指望靠
title属性做开关（如title="dark-theme"），那只是 legacy alternate stylesheet 机制，现代浏览器基本不支持切换
路径写错导致模块“导入失败”的真实表现
所谓“模块没生效”，90% 是 href 路径不对。浏览器不会报错，只会静默忽略——Network 面板显示 404，控制台却没提示，DOM 渲染照常进行，只是没样式。
典型问题：
-
href="css/module.css"在/article/2024/页面下请求的是/article/2024/css/module.css，而非你预期的根目录下的文件 - 本地用
file:///协议打开 HTML，但href写了http://或反斜杠\，直接跨域或解析失败 - 忘了加
rel="stylesheet"，浏览器把链接当普通资源处理，完全不解析 CSS 内容
实操建议：
- 统一用以
/开头的绝对路径：href="/css/base.css"，不依赖当前 HTML 位置 - 开发时打开 DevTools → Network → Filter 输入
css，确认每个<link>对应的请求状态码是 200 - 检查响应内容是否为真实 CSS 文本（不是 404 HTML 页面或空文件）
动态加载 CSS 模块时容易漏掉的一步
用 JS 创建 <link> 加载模块很常见，但很多人只管 append，不管是否就绪。如果紧接着读 getComputedStyle 或操作 DOM，样式很可能还没生效。
示例问题代码：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/modal.css';
document.head.appendChild(link);
// ❌ 错误：这里 CSS 还没加载完
console.log(getComputedStyle(document.body).backgroundColor); // 可能还是初始值
正确做法：
- 必须监听
link.onload或link.addEventListener('load', ...) - 出错时也应监听
link.onerror，否则加载失败无声无息 - 不要用
setTimeout等固定时间，网络波动下不可靠
复杂点在于：多个动态模块之间有依赖（比如 utils.css 必须先于 modal.css 加载），这时得串行控制或用 Promise.all + 动态 <link> 队列——这已经超出“导入”范畴，进入运行时样式编排了。
