首先通过grep提取CSS类生成列表，再扫描模板文件收集使用类，利用comm找出未引用类，结合sed安全删除，并封装为可复用脚本实现自动化清理。
如果您在项目中发现大量无用的CSS类影响代码整洁和性能，可以通过Linux命令快速定位并清理这些冗余样式。grep命令结合其他文本处理工具能高效扫描源码与样式表，精准匹配未被引用的CSS类名。
本文运行环境：Dell XPS 13，Ubuntu 24.04
一、生成所有CSS类列表
从项目的主样式文件中提取所有定义的CSS类名，为后续比对提供基础数据集。使用正则表达式匹配以点号开头的类选择器，并去除重复项。
1、进入项目styles目录，执行命令：grep -o '.w+' main.css | sort -u > css_classes.txt。
立即学习“前端免费学习笔记（深入）”；
2、检查输出文件是否包含完整类名列表，确保没有遗漏嵌套或复杂选择器。
二、扫描前端模板中的CSS类引用
遍历HTML或JSX模板文件，收集实际被使用的CSS类名称，作为有效类名的依据。通过递归搜索整个views目录实现全面覆盖。
1、运行指令：grep -r -o 'class=["''']S+' templates/ | grep -o 'w+' | sort -u > used_classes.txt。
2、确认路径templates/指向正确的模板根目录，避免漏检子目录内容。
三、找出未被引用的CSS类
利用差集运算识别出仅存在于样式表但未在模板中调用的类名，这些即为潜在可删除的无用类。
1、执行对比操作：comm -23 css_classes.txt used_classes.txt > unused_classes.txt。
2、查看unused_classes.txt文件内容，验证结果是否符合预期逻辑。
四、批量删除无用类（安全模式）
在正式修改前创建备份，并仅移除已确认无引用的类定义，防止误删导致样式丢失。使用sed配合grep实现精确替换。
1、为main.css创建备份：cp main.css main.css.bak。
2、逐行读取unused_classes.txt，构造删除命令：while read line; do sed -i "/\.$line/d" main.css; done < unused_classes.txt。
五、使用自动化脚本提升效率
将上述流程封装成Shell脚本，支持参数化路径输入，便于在不同项目间复用。添加日志记录功能以便追踪每次清理的结果。
1、编写clean-css.sh脚本文件，包含变量定义PROJECT_PATH、LOG_FILE等。
2、在脚本末尾加入统计语句：echo "$(wc -l < unused_classes.txt) 个无用类已被清除"，输出清理数量。
