使用sed命令可批量修改HTML和CSS类名，先通过find定位文件，用sed替换内容，建议先备份并用grep预览匹配，确保准确无误。
如果您需要批量修改多个HTML或CSS文件中的类名，但手动更改效率低下且容易出错，可以通过Mac终端使用sed命令快速实现自动化替换。这种方法特别适用于前端开发中需要统一调整样式命名的场景。
本文运行环境：MacBook Pro，macOS Sonoma
一、使用sed命令直接替换CSS类名
sed是流编辑器，能够在不打开文件的情况下对文本进行查找和替换。通过正则表达式匹配目标CSS类名，并将其替换为新名称，可实现高效批量处理。
1、打开Mac终端，进入包含HTML和CSS文件的项目目录，例如：cd /Users/username/project。
立即学习“前端免费学习笔记（深入）”；
2、执行sed命令替换所有文件中旧类名old-class为新类名new-class：find . -type f \( -name "*.html" -o -name "*.css" \) -exec sed -i '' 's/\bold-class\b/new-class/g' {} \;。
3、确认命令执行完成后，检查相关文件是否已正确更新类名。
二、先备份再替换确保数据安全
在执行批量替换前创建文件备份，可以防止因正则表达式误匹配导致的内容损坏，保障原始文件的安全性。
1、使用find与cp组合命令创建所有HTML和CSS文件的备份副本：find . -type f \( -name "*.html" -o -name "*.css" \) -exec cp {} {}.bak \;。
2、运行带备份机制的sed替换命令：find . -type f \( -name "*.html" -o -name "*.css" \) -exec sed -i '.bak2' 's/\bold-class\b/new-class/g' {} \;，此操作会保留原始文件为.bak，新备份为.bak2。
3、验证替换结果无误后，可删除备份文件：find . -name "*.bak" -delete && find . -name "*.bak2" -delete。
三、结合grep预览匹配内容避免错误替换
在正式替换前使用grep查看哪些文件包含目标类名，有助于确认替换范围，减少误操作风险。
1、搜索项目中所有包含old-class的文件：grep -r "old-class" --include="*.html" --include="*.css" .。
2、根据输出结果判断是否需要调整正则表达式，例如添加单词边界\b以避免部分匹配。
3、确认无误后结合sed执行替换操作，命令同方法一中的步骤2。
