是HTML中唯一可靠、可预测且浏览器原生支持的CSS模块化接入方式；它本身不提供作用域或导出语法，但作为标准通道，需配合构建工具（如Vite/webpack对.module.css的编译）或CSSStyleSheet API才能实现真正模块化。
是唯一可靠、可预测、浏览器原生支持的 CSS 模块化导入方式；@import 和内联 中的模块化尝试（如 @layer、@scope）目前无法替代它，也不构成“模块脚本”。
为什么没有真正的 “CSS Module Scripts”
CSS 本身没有 import 语句级别的模块系统（不像 JS 的 import），所谓“CSS 模块”在前端工程中实际指两类东西：一是构建工具（如 Webpack/Vite）对 .module.css 文件的编译处理（生成带哈希的局部作用域类名）；二是浏览器原生支持的 constructable stylesheets（CSSStyleSheet 构造函数），但它需要 JS 驱动，不是 HTML 原生语法。
常见误解是把 @import url("base.css") 当作模块导入——它只是串行加载依赖，不隔离作用域、不支持条件导入、不参与构建时的 tree-shaking。
-
@import在 CSS 文件里写，会阻塞主样式表解析，导致 FOUC 风险升高 - 浏览器不会为
@import的文件生成独立的样式作用域，所有规则仍全局生效 - 现代打包工具已基本弃用
@import作为模块机制，改用 JSimport语句导入 CSS 文件
虽然 本身不提供作用域或导出语法，但它是将模块化 CSS 资源接入页面的**唯一标准通道**。关键在于你如何组织这些 所指向的 CSS 文件：
- 每个
可视为一个“模块”入口 - 配合构建工具，
button.css可被编译为只含.Button_root_abc123类名的局部作用域代码 - 多个
的加载顺序决定层叠权重（button.css在theme.css后引入，就能覆盖主题色） - 用
media="print"或media="(prefers-color-scheme: dark)"实现条件加载，接近模块按需
注意：rel="preload" as="style" 不是模块化手段，它只预下载不应用；必须配合 JS 动态 sheet.replace() 才能控制时机。
容易踩的坑：路径、顺序、缓存与调试
模块化失败，90% 出在路径和加载时机上：
-
href="components/button.css"在/article/2024/页面下会请求/article/2024/components/button.css，不是你想要的根路径 - 多个
顺序写反（比如theme.css在button.css后），导致样式被意外覆盖 - 本地用
file:///协议打开 HTML，href含相对路径或http://会直接跨域失败 - 服务器开启 SPA 路由（如 Vue Router history 模式），但没配静态资源 fallback，
/css/button.css被当成前端路由返回 404 HTML
实操建议统一用根绝对路径：href="/static/css/button.css"，并在构建时确保输出目录与该路径一致。
真正想用模块化？绕不开 JS 驱动的 CSSStyleSheet
如果你需要运行时动态导入、作用域隔离、或基于状态切换样式模块，得用 JS：
const sheet = new CSSStyleSheet();
await sheet.replace('@layer button { .root { color: blue; } }');
document.adoptedStyleSheets = [sheet];
但这意味着放弃纯 HTML 声明式加载，且 CSSStyleSheet 兼容性有限（Chrome 73+，Firefox 94+，Safari 15.4+），IE 完全不支持。多数项目仍选择在构建阶段完成模块化，而非运行时。
最常被忽略的一点：模块化 CSS 的收益，高度依赖构建流程是否启用局部作用域（如 css-loader 的 modules 选项或 Vite 的 .module.css 规则）。光靠 HTML 里的 写得再“模块化”，没构建配合，就只是多个全局样式文件而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
