css-modules

CSS Modules 技能为现代 React 和 TypeScript 应用程序提供了强大的样式架构。它专注于通过在构建时生成局部作用域的类名来实现真正的组件封装，有效消除全局命名空间的冲突。此技能特别针对利用 Vite 的高性能前端环境进行了优化，提供 Lightning CSS（因其卓越的转换速度而推荐）和传统 PostCSS 工作流程的深度配置模式。对于管理复杂动画、样式化第三方 UI 库，或执行从旧版全局 CSS 架构迁移到可维护模块化系统的开发人员而言，这是理想的解决方案。通过使用组合模式，开发人员可以在不牺牲隔离性的前提下共享样式，确保设计系统保持可预测性和模块化。此技能还填补了样式定义与静态类型之间的鸿沟，提供生成 TypeScript 定义文件的配置，为类名提供自动补全，并防止开发过程中的引用错误。它作为对 *.module.css 命名规范映射、配置构建时类名模式以及在样式必须在组件边界之外时实现全局脱逃通道的完整参考。无论您是在构建高度交互的动画还是架构大型设计系统，此技能都能为高效、无冲突且类型安全的样式设计提供必要的运营模式。

• 使用唯一的构建时哈希码进行 CSS 类名的自动局部作用域化

• 与 Vite、Lightning CSS 和 PostCSS 加载器的高级集成

• 通过生成的 TypeScript 定义文件实现类型安全的样式导入

• 用于跨组件树共享样式逻辑的组合模式

• 支持复杂选择器策略，包括 :local 和 :global 作用域

• 用于跨浏览器兼容性的供应商前缀和现代语法转译

• 针对开发和生产环境的类名模式自定义

• 适用场景：复杂组件动画、第三方组件样式化和旧版 CSS 迁移

• 输入：遵循 *.module.css 规范的组件专有 CSS 或 SCSS 文件

• 输出：封装后的 CSS 包和 React 组件使用的导入式 JavaScript 样式对象

• 限制：需要 Vite 或兼容于模块的打包工具来处理类名转换

• 优化建议：使用 Lightning CSS 取代 Autoprefixer，可将构建性能提升高达 100 倍

• 专家建议：采用混合方法，结合 Tailwind CSS 处理布局工具类，并利用 CSS Modules 处理组件特定逻辑