先提取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/ 目录下，先提取出所有定义的类名（去除注释、选择器等干扰）：
<font face="Courier New"><strong>grep -r '^\.\w\+' ./css/ --include="*.css" | grep -o '\.\w\+' | sed 's/^\.//' | sort -u > css_classes.txt</strong></font>
- grep -r：递归搜索 CSS 文件
- ^\.\w\+：匹配以 . 开头的类选择器（更精确可调整正则）
- sed 's/^\.//'：去掉前面的点，只保留类名
- 结果保存到 css_classes.txt
2. 查找 HTML 和 JS 中使用的所有 class 名称
从 HTML 和 JavaScript 文件中提取所有出现在 class 属性或模板中的类名：
<font face="Courier New"><strong>grep -rE 'class=["'"'"']?[^"'"'"']*\b\w+\b' ./src/ --include="*.html" --include="*.js" | grep -o 'class=["'"'"'][^"'"'"']*' | grep -o '\w\+' | sort -u > used_classes.txt</strong></font>
- 支持双引号或单引号内的 class 属性
- grep -o '\w\+' 提取其中每个单词作为类名
- 保存为 used_classes.txt
3. 找出未被使用的类名
对比两个列表，找出只在 CSS 中定义但未在代码中使用的类：
立即学习“前端免费学习笔记（深入）”；
<font face="Courier New"><strong>comm -23 <(cat css_classes.txt) <(cat used_classes.txt)</strong></font>
- comm -23：显示第一个文件有但第二个没有的内容
- 输出即为疑似“未使用”的 CSS 类名
4. 注意事项和优化建议
这个方法是静态分析，有一定局限性：
- 动态拼接的类名（如 class="btn-{{state}}"）不会被捕获
- JSX 或 Vue 模板中的表达式需额外处理
- 组件化框架（React/Vue）可能需要借助 AST 工具更准确分析
- 建议配合项目构建工具（如 PurgeCSS）做生产级清理
基本上就这些。对于简单项目，这套 grep 组合能快速发现明显冗余的类；复杂项目建议用专门工具辅助验证。不复杂但容易忽略细节，比如正则写得太松会误报。
