学完这篇，你能判断页面里哪些 style="..." 该留、哪些必须搬走，并用一条命令把它们找出来、按稳妥的顺序改完，不再因为内联样式和样式表打架。
第一步：先分清三层职责
HTML 只描述「这是什么」——这是标题、那是按钮、这段是引用；CSS 描述「长什么样」；JavaScript 描述「怎么动」。内联样式就是写在标签上的 style="color:red;margin-top:10px"，它把表现硬塞进了结构层，本质上是越权。
越权的代价很具体：同一个颜色散落在 30 个标签里，改主色要改 30 处；样式优先级被拉到最高（内联 1000，!important 之外无人能敌），后期想在样式表里覆盖只能靠加 !important 层层加码；模板里 HTML 和样式混在一起，读代码的人得同时理解两件事。
第二步：用一条命令把所有内联样式揪出来
在项目根目录跑：
grep -rn 'style="' --include="*.html" --include="*.php" --include="*.tpl" . | wc -l
先看总数，再去掉统计只看明细：
grep -rn 'style="' --include="*.html" --include="*.php" . > inline-style-report.txt
按文件排序找出重灾区：
grep -rn 'style="' --include="*.html" . | cut -d: -f1 | sort | uniq -c | sort -rn | head -20
第三步：按用途分类，别一刀切
拿到清单后，逐条问三个问题：
- 值是不是固定不变的？ 比如
color:#333、padding:8px 12px——这是静态样式，必须搬走。
- 同样的值是否出现多次？ 出现两次以上，就说明它该有个类名。
- 值是否由后端或 JS 在运行时算出来？ 比如进度条宽度、用户自定义主题色——这类是动态值，有专门的承接方式。
注意：分类这一步别急着动手改。先在心里把清单切成「静态」「重复」「动态」三堆，混着改最容易把优先级改乱。
第四步：静态样式搬进样式表，用语义化类名
改之前：
<div style="background:#f5f5f5;padding:16px;border-radius:6px">
<p style="font-size:13px;color:#888">发布于 2024-05-01</p>
</div>
改之后：
<div class="post-card">
<p class="post-meta">发布于 2024-05-01</p>
</div>
.post-card { background: #f5f5f5; padding: 16px; border-radius: 6px; }
.post-meta { font-size: 13px; color: #888; }
注意：类名要表达「它是什么」，不要表达「它长什么样」。.red、.mt10、.f13 这类命名等于把内联样式换个地方写，改版时照样要全站搜。用 .post-meta、.btn-primary。
注意：内联样式的优先级高于任何选择器。抽成类之后，原来能生效的样式可能被样式表里更早的规则覆盖，页面会「变样」。改完必须逐页对照，别只看首页。
第五步：动态值只留变量，不留规则
运行时才确定的值，可以保留 style 属性，但只写自定义属性，规则仍然放样式表里：
<div class="progress" style="--percent: 62%"></div>
.progress { width: var(--percent); }
这样「样式写在 CSS 里」这条线没破，只是值从外部注入。同理，用户自定义主题色可以用 data-theme 属性配合属性选择器实现，比在标签上堆颜色更干净。
第六步：加 lint 规则防回潮
人工清理完，得有个东西拦住下一次提交。用 HTMLHint 的 inline-style-disabled 规则，项目根目录建 .htmlhintrc：
{
"inline-style-disabled": true
}
然后跑：
npx htmlhint "src/**/*.html"
放进 CI 或提交前的钩子里，谁再写内联样式，构建直接报错。
哪些情况内联是合理的
有三种场景内联不算错，别硬改：
- HTML 邮件模板：大量邮件客户端会剥掉
<style> 标签和外链样式表，内联是唯一稳的做法。
- 首屏关键 CSS：为了首屏速度，把极小一部分关键样式内联进
<head> 或标签，属于性能取舍。
- 第三方嵌入代码：别人给的 iframe、分享按钮，通常不让你改。
注意：这三条例外别被拿来当偷懒的挡箭牌。判断标准是「有没有技术上的硬约束」，不是「这次改起来麻烦」。
小结
- 内联样式把表现塞进结构层，代价是改一处要改一片、优先级锁死、模板难读。
- 用
grep -rn 'style="' 先量化，再按静态／重复／动态分类，别混着改。
- 静态样式抽成语义化类名；动态值只保留 CSS 自定义属性，规则仍留在样式表。
- 抽类后优先级会变，必须逐页对照验证。
- 用 HTMLHint 的
inline-style-disabled 加进 CI，防止回潮。
- 邮件模板、关键 CSS、第三方嵌入是合理例外，但要有硬约束做依据。
正式会员
认证极客
钻石卡会员
见习用户
