如何清理React+Sass Modules项目源码中未使用的冗余CSS？

一、用静态分析工具定位未使用样式 #

直接扫描源码关联组件与样式文件，精准标记未被引用的类选择器：

• 用stylelint搭配stylelint-no-unused-selectors插件：配置后可直接扫描.module.scss文件，通过关联React源码路径，自动识别未被组件引用的样式。
  示例配置（.stylelintrc）：

  {
    "plugins": ["stylelint-no-unused-selectors"],
    "rules": {
      "plugin/no-unused-selectors": [true, {
        "glob": "./src/**/*.{js,jsx,ts,tsx}"
      }]
    }
  }
  

• 用eslint-plugin-css-modules：检查组件中引用的CSS Modules类名是否存在于对应样式文件中，反向对比即可找出样式文件里未被引用的类。

二、手动校验+增量清理 #

工具可能对动态类名误判，需结合人工验证和小步清理：

• 对工具标记的未使用样式，在组件代码中全局搜索类名，确认无直接或动态引用（比如模板字符串拼接的类名）。
• 采用小批量清理：每次只处理单个样式文件的10%-20%未使用代码，清理后立即运行项目测试，避免误删有效样式。
• 重点排查动态类场景：比如className={${styles.btn} ${styles[btn-${size}]}}这类写法，工具无法识别，需手动确认对应样式是否真的无人使用。

三、重构样式文件结构，避免冗余再生 #

清理完现有冗余后，优化结构从根源减少冗余：

• 拆分大文件：将千行以上的.module.scss按组件或UI模块（按钮、表单、卡片等）拆分为小文件，单个组件对应独立样式文件，便于追踪维护。
• 引入原子化复用：把通用样式（间距、颜色、字体）提取为Sass混合宏（@mixin）或扩展（@extend），减少重复代码，避免新增冗余。
• 统一命名规范：采用BEM命名法结合CSS Modules局部作用域，让类名用途更清晰，降低判断样式是否有用的成本。

四、设置自动化防护，阻止新冗余提交 #

通过流程管控避免后续冗余积累：

• 在CI/CD流程中加入stylelint检查，不允许包含未使用样式的代码提交到仓库。
• IDE实时提示：在VS Code等编辑器安装stylelint插件，编写样式时实时标记未使用选择器，及时清理。

内容的提问来源于stack exchange，提问作者sudofix