直接@import会阻塞CSS解析且无法并行下载，导致首屏延迟；构建工具无法静态分析，故应改用JS层导入或link异步加载，并通过CSS Modules实现类名隔离与作用域控制。
为什么直接 @import 多个 CSS 文件在大型项目里会拖慢首屏？
浏览器解析到 @import 时会阻塞后续 CSS 解析，且不支持并行下载——哪怕写在 main.css 末尾，它引入的 header.css 也要等 main.css 完全下载解析完才开始请求。实际项目中嵌套两三级 @import，首屏样式加载可能延迟 300ms 以上。
更麻烦的是，@import 在 CSS 文件里无法被构建工具（如 Webpack、Vite）静态分析，导致无法做 scope 隔离、tree-shaking 或自动提取关键 CSS。
- 避免在 CSS 文件中用
@import拆分模块，改用 JS 层导入：例如import './Button.module.css' - 如果必须保留纯 CSS 流程（如遗留系统），改用 HTML 的
并添加media="print" onload="this.media='all'"实现异步加载 - Webpack 用户确认
css-loader开启了modules: true，否则.module.css文件不会启用局部作用域
如何让不同组件的 .title 类名不互相污染？
CSS 模块（CSS Modules）不是语法标准，而是构建时的转换行为：把 .title 编译成类似 Button_title__aBc2x 这样的唯一哈希类名，并只在对应组件内生效。它不依赖 BEM 命名约定，也不靠 CSS-in-JS 运行时插入 style 标签。
关键点在于「构建时确定性」：相同文件内容生成相同哈希，便于缓存；同时支持 :global(.reset) 显式透出全局样式。
- 文件名必须含
.module.css（或配置css-modules规则），否则 loader 不触发模块化 - React 中用
className={styles.title}，不要写死className="title" - 若需组合多个模块类名，用
clsx库：例如className={clsx(styles.root, props.disabled && styles.disabled)}
Vite / Webpack 中开启 CSS Modules 后，为什么 composes 不生效？
composes 是 CSS Modules 的扩展语法，用于复用其他模块的样式规则，但默认不开启。它不是 CSS 标准，需要 loader 显式支持，且路径解析和 Webpack 的 resolve.alias 冲突时会静默失败。
典型错误是写 composes: title from '../Typography/Typography.module.css';，但实际路径因别名变成 @/styles/Typography.module.css，而 composes 不走 Webpack resolve 流程，直接报 Can't resolve '../Typography/Typography.module.css'。
- Vite 用户需在
vite.config.ts中为css.modules配置additionalData或改用 JS 导入 +clsx组合 - Webpack 用户确保
css-loader版本 ≥ 6，且modules.exportLocalsConvention设为'camelCaseOnly'避免导出名大小写问题 - 更稳妥的做法是放弃
composes，改用export const title = 'xxx'在 JS 层组合，控制力更强
要不要把所有样式都塞进 style 标签或内联？
内联样式（style={{ color: 'red' }}）只适合动态值，比如根据 props 改变背景色。把它当成模块化手段是反模式：无法继承、不能伪类、不支持媒体查询、开发者工具里看不到完整样式流。
真正要解决的是「作用域泄漏」和「打包冗余」，而不是「是否写在 HTML 里」。CSS Modules 已经解决前者；而后者靠构建工具提取公共 CSS（如 extract-css-chunks-webpack-plugin）或利用 HTTP/2 多路复用减少请求数。
- 禁止用
!important破坏模块隔离，遇到覆盖问题先检查样式加载顺序或 specificity - 动画关键帧（
@keyframes）默认是全局的，需手动加:global()包裹才能被其他模块引用 - 主题切换需求强烈时，优先用 CSS 自定义属性（
--primary-color）+ JS 切换 class，而非生成多套 CSS 文件
实际项目里最常被忽略的，是 CSS Modules 的「模块边界」完全由文件物理路径决定——哪怕两个文件内容一模一样，只要路径不同，生成的类名就不同，也无法共享样式对象。这意味着重构时移动文件，所有引用它的 JSX 都得同步更新 import 路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
