如何在含多CSS文件的文件夹中查找并移除重复CSS代码

针对你在"New_Theme"项目中多CSS文件存在重复样式（如重复的h1{color:#3B4045}）的场景，以下是几个高效的解决方案：

一、用CSS预处理器从根源避免重复 #

通过Sass/Less这类预处理器重构样式，将重复代码抽离为可复用单元，同时统一管理样式文件：

• 把重复的属性块定义为混合宏（以Sass为例）：

  @mixin heading-color {
    color: #3B4045;
  }
  

• 在需要使用该样式的文件中引入并调用混合宏：

  @import './mixins.scss';
  h1 {
    @include heading-color;
  }
  

• 将所有分散的CSS模块导入到主样式文件，编译生成最终的CSS文件，彻底消除重复。

二、用PostCSS自动移除重复代码 #

借助PostCSS的专用插件批量处理所有CSS文件，自动检测并删除重复的样式规则：

1. 初始化项目（若未使用npm）：

   npm init -y
   

2. 安装依赖：

   npm install postcss postcss-cli postcss-discard-duplicates --save-dev
   

3. 在项目根目录创建postcss.config.js配置文件：

   module.exports = {
     plugins: [
       require('postcss-discard-duplicates')
     ]
   }
   

4. 执行命令批量处理所有CSS文件（将处理后的文件输出到dist目录）：

   npx postcss ./New_Theme/**/*.css -d ./dist
   

三、VS Code全局搜索+批量编辑 #

利用VS Code的全局搜索和多光标功能，手动定位并删除重复样式：

• 按Ctrl+Shift+F打开全局搜索面板，输入匹配完整样式块的正则，比如针对你的示例：

  h1\s*\{\s*color:#3B4045\s*\}
  

• 在搜索结果中查看所有重复的位置，保留其中一处，使用多光标（按住Alt点击重复行）批量删除其余重复内容。

注意事项 #

• 处理前务必备份原CSS文件，防止误操作丢失代码
• 若多个不同选择器的属性完全一致，可合并选择器减少冗余（如h1, .page-title, .section-heading { color: #3B4045; }）
• 长期维护建议按功能模块拆分样式文件，降低重复代码产生的概率

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