内联样式仅适用于紧急覆盖、js动态控制、html邮件及ssr首屏等不可替代场景；它优先级最高但无法响应式、不支持伪类/媒体查询、破坏可维护性，应严格限制使用范围。
内联样式不是“写CSS”的常规路径，而是紧急覆盖或动态注入的临时手段；它优先级最高，但代价是破坏可维护性、无法响应、不能复用。
style属性只对可渲染元素生效，写在或上完全没用
浏览器会直接忽略那些不参与渲染的标签上的style属性。比如<meta>、<link>、<script></script>这些元信息类标签，加了style也不会改变页面外观。常见错误是想给里某个<link rel="stylesheet">加背景色来“标记”，结果什么都没变——因为<link>本身不可见、不渲染。
真正能用style的，只有<p></p>、<div>、<code><span></span>、<h1></h1>这类视觉容器。语义化结构标签如<article></article>、<section></section>虽然技术上支持，但滥用会模糊关注点，应优先用class配合外部CSS控制。
内联样式无法声明:hover、@media、--color等现代CSS能力
你写style="color: red;"没问题，但下面这些全都不行：
-
style=":hover { color: blue; }"→ 语法错误，浏览器直接丢弃整条声明 -
style="@media (max-width: 768px) { font-size: 14px; }"→ 不解析媒体查询 -
style="--primary: #007bff;"→ 自定义属性不会注册到CSSOM中 -
style="animation: spin 1s;"→@keyframes未定义，动画无效
这意味着：只要涉及交互、响应式、主题切换或设计系统，style就天然掉队。它只适合“此刻这个元素必须是这样”的静态断言，不是样式逻辑的载体。
JavaScript操作style属性时，驼峰命名和重排开销容易被忽略
用JS改样式，elem.style.backgroundColor = '#eee'是对的，但elem.style.background-color = '#eee'会报错——因为连字符在JS中是减法运算符，必须转驼峰。
更隐蔽的问题是性能：
- 每次赋值
elem.style.xxx都可能触发重排（reflow），比切换class重得多 -
elem.style.color只能读取内联值，查不到class或外部CSS设的颜色 - 要读真实生效的值，得用
getComputedStyle(elem).color，不是elem.style.color - 批量修改建议用
elem.setAttribute('style', '...')一次性写入，避免多次触发重排
邮件模板和SSR静态页是少数合理使用内联样式的场景
某些环境强制要求样式必须内联：
- HTML邮件客户端（如Outlook）普遍不支持
<style></style>或外部CSS，只认style属性 - 服务端渲染生成的静态页（如营销落地页），为减少HTTP请求数，有时把关键样式内联进
或关键元素 - JS拖拽过程中实时更新
transform或opacity，用style比反复切class更可控
但即便在这些场景，也要克制：只内联真正必要的声明，避免把整套按钮样式塞进每个<button style="..."></button>里。复杂逻辑仍该抽离，用class + 外部CSS兜底。
最常被低估的一点：内联样式一旦写死，就脱离了CSS的层叠机制和选择器特异性控制。调试时看到style="display: none"却失效，大概率是外部CSS用了!important反向覆盖——而你根本没法用更高优先级去赢回来。
