内联样式应优先移除重复、带逻辑、响应式及纯装饰性四类；转为语义化class命名并分层管理；推荐使用外部CSS文件以提升缓存、协作与工程化能力。
内联样式（style="..."）写太多，确实会让 HTML 变得臃肿、重复、难调试，也违背了“结构与样式分离”的基本准则。解决思路很明确：能抽离的就抽离，能复用的就抽象，能归类的就归类。
哪些内联样式该优先移走？
以下几类最典型，建议第一时间清理：
- 重复出现的样式，比如多个按钮都有
style="padding: 8px 16px; border-radius: 4px; background: #007bff;" - 带逻辑的样式，例如
style="display: {{ show ? 'block' : 'none' }};"—— 这种更适合用 class 切换控制显隐 - 响应式相关样式，如
style="font-size: 14px; margin-top: 1rem;"在不同屏幕下要变，内联根本没法媒体查询 - 纯装饰性样式，像颜色、边框、阴影、过渡等，和语义无关，只管视觉，理应交给 CSS 管理
怎么把内联样式转成 class？
不是简单删掉 style 属性就完事，关键是建立有意义的命名和合理分层：
- 先观察样式组合是否表达同一意图，比如
padding+bg+color+border-radius很可能是在定义一个「主按钮」，那就起名.btn-primary - 避免用“位置”或“颜色值”命名，如
.top-red-box—— 换个主题就废了；推荐语义化命名：.alert-error、.card-highlight - 用 BEM 或类似规范管理嵌套关系，例如
.header__logo、.header__nav-item--active，降低样式冲突风险 - 小范围临时样式可保留 class，但别再塞
style—— 比如比style="text-align:center;font-size:12px"更可控什么时候该用外部 CSS 文件？
只要项目不是单页静态 HTML，都该用外部样式表。好处不只是“好维护”，更是协作和性能的基础：
立即学习“前端免费学习笔记（深入）”；
- 浏览器缓存生效：CSS 文件一次下载，多页复用，HTML 更轻量
- 支持预处理器：Sass/Less 可用变量、嵌套、函数，批量改主题色、统一间距系统
- 便于工程化：可以加 PostCSS 自动补前缀、压缩、提取关键 CSS
- 方便团队分工：前端写 HTML + JS，UI 工程师专注 CSS 设计系统，互不干扰
实在绕不开内联样式的场景怎么办？
极少数情况确实需要动态 style，比如 Canvas 容器宽高随 JS 计算变化、拖拽元素实时 left/top、主题色从接口获取等。这时建议：
- 用
element.style.setProperty('--theme-color', value)设置 CSS 变量，让真实样式仍留在外部 CSS 中 - 封装成工具函数，例如
setStyle(el, { opacity: 0.5, transform: 'scale(0.9)' })，避免零散el.style.xxx = yyy - 服务端渲染中需首屏样式直出时，可用
标签内联关键 CSS（Critical CSS），但这是“内联样式块”，不是“内联 style 属性”，概念不同
基本上就这些。内联样式不是敌人，只是容易滥用。养成“写之前想 class 名”的习惯，比后期重构轻松十倍。
