行内样式破坏维护性，因其将表现逻辑硬编码进结构层，导致改颜色、调间距、适配响应式时需逐个搜索HTML中style属性，漏改即UI不一致；且其优先级（1000）高于外部CSS，使CSS修改无效，DevTools中常出现冲突规则。
为什么行内样式（style 属性）会破坏维护性
它直接把表现逻辑硬编码进结构层，导致改颜色、调间距、适配响应式时，必须逐个打开 HTML 文件搜索 style="..."，漏改一处就 UI 不一致。更麻烦的是，style 属性的 CSS 优先级高于外部类名，调试时 Chrome DevTools 的 Styles 面板里常出现两套同名规则，一套来自 main.css，一套来自 style 属性，浏览器永远用后者，你改了 CSS 文件也白改。
如何把已有 style 属性安全迁移到外部 CSS
迁移不是简单剪切粘贴，得兼顾语义和复用性：
- 先识别重复模式：比如多个
<div style="margin: 10px 0; padding: 12px;">，应抽成 <code>.u-mt-10.u-mb-10.u-p-12这类工具类，或更语义的.card - 避免照搬值：不要直接写
.old-style { margin: 10px 0; padding: 12px; }，而要结合上下文重命名，如.article-meta或.notification-banner - 检查 JavaScript 动态样式：如果 JS 里有
el.style.margin = "20px"，改成el.classList.add("u-mt-20")，并确保对应类已在 CSS 中定义 - 上线前全局搜索
style=，确认无遗漏；构建流程中可加 ESLint 插件eslint-plugin-html检测残留 - 服务端渲染动态尺寸：如 SVG 中的
<circle cx="<%= x %>" cy="<%= y %>" r="<%= radius %>"></circle>，前提是x/y/radius已严格校验为数字，且不参与主题或响应式计算 - React/Vue 中绝对定位的临时浮层：仅限
transform: translate()类动画位移，禁用top/left—— 否则触发重排，性能掉帧 - 禁止在 Vue 模板或 JSX 中写
style={{ marginLeft: '20px' }}，改用class="u-ml-5"或 CSS-in-JS 的styled.div封装 - 所有
style值必须用双引号包裹，属性间用分号分隔，如style="color: #333; font-size: 14px;"，不能省略引号或写错分隔符 - 无法被浏览器长效缓存：每次加载 HTML 都得重新下载这段 CSS，而外部
main.css可缓存数月 - 无法跨页复用：A 页面写了
.btn { color: blue; }，B 页面要一模一样按钮，只能复制粘贴，改色时又得两头改 - 构建时难优化：Webpack/Vite 的 CSS 提取、压缩、按需加载插件（如
css-minimizer-webpack-plugin）对<style></style>块无效 - 唯一可接受例外：首屏关键 CSS，且必须显式声明
<style media="screen and (min-width: 0px)"></style>，避免阻塞渲染
哪些场景真需要 style 属性？怎么写才不踩坑
极少数合法场景存在，但必须受控：
<style></style> 标签比 style 属性好在哪？为什么还是不推荐
<style></style> 标签虽不污染单个元素，但仍在 HTML 文件内，本质仍是结构与样式的逻辑耦合：
立即学习“前端免费学习笔记（深入）”；
真正干净的分离，是 HTML 只留 <link rel="stylesheet" href="main.css">，所有视觉规则都在那个文件里——哪怕只有一行，也要抽出去。
