首先通过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 。
五、使用自动化脚本提升效率
将上述流程封装成Shell脚本，支持参数化路径输入，便于在不同项目间复用。添加日志记录功能以便追踪每次清理的结果。
1、编写clean-css.sh脚本文件，包含变量定义PROJECT_PATH、LOG_FILE等。
2、在脚本末尾加入统计语句：echo “$(wc -l ，输出清理数量。
以上就是Linux grep秒杀项目里700个无用CSS类！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596440.html
微信扫一扫 
支付宝扫一扫 
