先提取CSS文件中的类名，再从HTML和JS中找出使用的类名，最后对比得出未使用类。具体步骤：1. 用grep递归提取./css/下所有以.开头的类选择器，去除点并去重保存为css_classes.txt；2. 在./src/中搜索class属性内的类名，支持引号和模板字符串，提取单词形式的类名去重后存为used_classes.txt；3. 使用comm -23比较两个文件，输出仅存在于css_classes.txt中的类，即为未被引用的疑似冗余类；4. 注意动态生成的类名、JSX或Vue表达式可能漏检，建议结合PurgeCSS等工具提升准确性。该方法适用于简单项目快速排查，复杂场景需借助AST解析辅助分析。
要查找项目中未使用的 CSS 类名，可以结合 grep 和文件遍历工具（如 find）来分析 HTML/JS 与 CSS 文件之间的引用关系。Linux 本身没有直接识别“未使用类”的功能，但可以通过命令组合实现初步排查。
1. 提取 CSS 文件中的所有类名
假设你的 CSS 文件在 ./css/ 目录下，先提取出所有定义的类名（去除注释、选择器等干扰）：
grep -r '^.w+' ./css/ --include="*.css" | grep -o '.w+' | sed 's/^.//' | sort -u > css_classes.txt
grep -r：递归搜索 CSS 文件 ^.w+：匹配以 . 开头的类选择器（更精确可调整正则） sed ‘s/^.//’：去掉前面的点，只保留类名 结果保存到 css_classes.txt
2. 查找 HTML 和 JS 中使用的所有 class 名称
从 HTML 和 JavaScript 文件中提取所有出现在 class 属性或模板中的类名：
grep -rE 'class=["'"'"']?[^"'"'"']*bw+b' ./src/ --include="*.html" --include="*.js" | grep -o 'class=["'"'"'][^"'"'"']*' | grep -o 'w+' | sort -u > used_classes.txt
支持双引号或单引号内的 class 属性 grep -o ‘w+’ 提取其中每个单词作为类名 保存为 used_classes.txt
3. 找出未被使用的类名
对比两个列表，找出只在 CSS 中定义但未在代码中使用的类：
立即学习“前端免费学习笔记（深入）”；
comm -23 <(cat css_classes.txt) <(cat used_classes.txt)
comm -23：显示第一个文件有但第二个没有的内容 输出即为疑似“未使用”的 CSS 类名
4. 注意事项和优化建议
这个方法是静态分析，有一定局限性：
动态拼接的类名（如 class=”btn-{{state}}”）不会被捕获 JSX 或 Vue 模板中的表达式需额外处理 组件化框架（React/Vue）可能需要借助 AST 工具更准确分析 建议配合项目构建工具（如 PurgeCSS）做生产级清理
基本上就这些。对于简单项目，这套 grep 组合能快速发现明显冗余的类；复杂项目建议用专门工具辅助验证。不复杂但容易忽略细节，比如正则写得太松会误报。
以上就是Linux用grep递归查找项目中未使用的CSS类名的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596740.html
微信扫一扫 
支付宝扫一扫 
