使用sed命令可批量优化CSS和HTML代码：首先将CSS中固定宽度替换为弹性单位如100%或clamp()，提升响应式适配；接着修改HTML内联样式中的px值为百分比，并外置样式；再通过正则删除重复或无用的选择器以减小文件体积；最后为flex、transition等属性自动添加-moz-、-webkit-等浏览器前缀，确保兼容性。整个过程高效精准，显著提升项目整洁度与跨设备兼容能力。
如果您在Linux环境下处理项目中的CSS和HTML文件，发现样式冗余或结构不符合响应式要求，可以通过sed结合正则表达式批量替换内容，提升代码整洁度与适配性。以下是具体操作方法：
一、使用sed替换CSS中的固定宽度为弹性单位
将CSS中硬编码的像素值（如width: 300px）替换为相对单位（如width: 100%或width: clamp()），有助于实现响应式布局。sed可通过正则匹配数字加px模式并进行替换。
1、进入项目css目录：cd /path/to/project/css。
2、执行替换命令，将所有width: [数字]px; 替换为width: 100%;：sed -i 's/width:\s*[0-9]\+px;/width: 100%;/g' *.css。
立即学习“前端免费学习笔记（深入）”；
3、若需保留部分关键像素值，可添加上下文过滤，例如排除类名为.container的规则：sed -i '/\.container/,/{}/!s/width:\s*[0-9]\+px;/width: min(100%, 300px);/g' style.css。
二、批量修改HTML中的内联样式属性
当HTML中存在大量内联style="width: 200px"等写法时，可用sed定位并替换这些属性值，推动样式外置并适配移动端。
1、查找所有.html文件中包含style属性且含px单位的行：grep -r 'style=.*px' *.html。
2、使用sed将内联宽度替换为百分比：sed -i 's/style=\"[^"]*width:\s*[0-9]\+px\([^"]*\)\"/style=\"width: 100%\1\"/g' *.html。
3、若需同时处理height属性，扩展正则表达式：sed -i 's/\(style=\"[^\"]*\)\(width:\s*[0-9]\+px\|height:\s*[0-9]\+px\)//g' *.html，然后统一添加响应式类名。
三、删除CSS中重复或无用的选择器
通过正则匹配常见冗余规则（如连续定义相同属性），减少CSS体积，提高加载效率。
1、识别并移除重复定义的margin或padding：sed -i '/margin: 0;\n.*margin: 0;/d' styles.css（注意：多行匹配需启用N命令）。
2、使用更精确的正则删除特定模式块：sed -i '/^\.unused-class\s*{/,/}/d' *.css，清除未使用的类定义。
3、结合grep与xargs动态删除空规则块：grep -l '{}.*$' *.css | xargs sed -i '/{}.*$/d'。
四、自动为CSS添加浏览器前缀以兼容旧设备
某些现代CSS属性需要-moz-、-webkit-等前缀才能在老版本浏览器中生效，sed可用于批量插入。
1、为display: flex添加前缀支持：sed -i 's/display: flex;/display: -webkit-box;\ndisplay: -ms-flexbox;\ndisplay: flex;/g' *.css。
2、替换transition属性并加入厂商前缀：sed -i 's/transition:/-webkit-transition:&\n-moz-transition:&\n-o-transition:&\ntransition:/g' *.css。
3、确保不重复添加前缀，先判断是否已存在：sed -i '/display: flex;/{s//display: -webkit-box;\ndisplay: -ms-flexbox;\ndisplay: flex;/;:a;n;ba}' *.css。
