Linux用grep递归查找项目中未使用的CSS类名

先提取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 中定义但未在代码中使用的类：

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

150

查看详情

立即学习“前端免费学习笔记（深入）”；

<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 组合能快速发现明显冗余的类；复杂项目建议用专门工具辅助验证。不复杂但容易忽略细节，比如正则写得太松会误报。

以上就是Linux用grep递归查找项目中未使用的CSS类名的详细内容，更多请关注php中文网其它相关文章！