Linux下用grep查找未使用的CSS类名方法

今天golang学习网给大家带来了《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/ 目录下，先提取出所有定义的类名（去除注释、选择器等干扰）：

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=["'"'"']?[^"'"'"']*\b\w+\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类名方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！