css模块化需用postcss+postcss-import拆分、css modules隔离样式、clsx处理状态组合，禁用@import；伪类/动画须与宿主同文件。
CSS 项目结构混乱，本质不是写法问题，而是缺乏模块边界和职责划分。靠“多写注释”或“改命名规范”治标不治本，真正要做的，是用工具把样式按功能/组件切开，并让这些模块可独立加载、测试和复用。
用 @import 拆分文件？别再用了
@import 在 CSS 中会阻塞渲染、无法并行加载，且不支持条件导入或变量透传。现代项目中它已基本被构建工具替代。
- Webpack/Vite 等打包器默认把
@import当作普通 CSS 导入处理，但不会做依赖分析或作用域隔离 - 在
.css文件里写@import "button.css"，最终仍会合并成一个大文件，模块性为零 - 如果还在用
@import实现“模块化”，说明构建流程没接入 PostCSS 或 CSS-in-JS 工具链
PostCSS + postcss-import 是轻量级拆分首选
它把 @import 提前编译成内联内容，支持路径别名、嵌套导入、甚至配合 postcss-preset-env 解析未来语法。
/* src/css/base.css */
:root {
--color-primary: #007bff;
}
<p>/<em> src/css/components/button.css </em>/
.button {
background: var(--color-primary);
border: none;
}/* src/css/index.css */ @import "base.css"; @import "components/button.css";
- 确保
postcss-import在 PostCSS 插件列表中排第一 - 导入路径基于
from参数（即当前文件路径），不是 HTML 引入位置 - 不支持运行时动态切换主题——所有变量在构建时就固化了
CSS Modules 能解决组件级样式污染，但要注意作用域泄漏
它自动哈希类名，让 .title 变成 Header_title__abc123，天然隔离组件样式。
立即学习“前端免费学习笔记（深入）”；
- Webpack 需启用
modules: true；Vite 默认识别.module.css后缀 - 全局类仍需显式声明：
:global(.highlight) { color: red; } - 若组件同时用 CSS Modules 和第三方 UI 库（如 Ant Design），库的样式不会被哈希，可能覆盖你的局部规则
- 不能直接用 JS 动态拼接类名：
className={styles['item-' + status]}会失效，得用styles.itemDefault这种静态键名
真正难的是状态组合与响应式拆分
按钮有 disabled、loading、size=large、theme=dark 四个维度，共 16 种组合。全写成独立类名（btn--disabled--loading--large--dark）不可维护；全用 JS 切换又退化回内联样式。
