行内样式需严格遵循CSS语法规范，用分号分隔、使用短横线命名、值含空格需引号；框架中须按规范传对象；部分属性不支持；性能调试成本高，仅适用于临时状态等窄场景。
行内样式怎么写才不被覆盖
行内样式优先级最高，但不是万能的——它会被 !important 覆盖，也会因属性拼写错误或 CSS 语法不合法而完全失效。
- 必须用分号
;分隔多个声明，漏掉一个会截断后续样式（比如color: red; font-size: 14px少了末尾分号，部分浏览器可能忽略font-size） - 属性名必须是标准 CSS 属性名，不能写成驼峰（
backgroundColor错，background-color对） - 值里有空格或特殊字符时，要用引号包裹，比如
font-family: "Helvetica Neue"，否则解析失败 - JavaScript 动态设置时，注意转义：用
element.style.color = "red"，而不是element.style."color"（语法错误）
style 属性在 React/Vue 里为什么不起作用
框架对 style 属性做了封装，直接写字符串常会失效，尤其遇到动态值或单位缺失时。
- React 中必须传对象：
style={{ color: "red", fontSize: "14px" }}，不能写style="color: red;"（JSX 会当字符串处理，不生效） - Vue 模板中支持字符串写法，但推荐绑定对象：
:style="{ opacity: isLoaded ? 1 : 0 }"，避免拼接字符串出错 - 数值型单位不能省略：写
fontSize: 14会被当成14px（仅 React），但lineHeight: 2是无单位倍数，padding: 8却不会自动加px—— 这个行为不一致，容易踩坑
哪些 CSS 属性在 style 里根本不能用
不是所有 CSS 都能通过 style 设置，有些被浏览器主动屏蔽，有些需要特定前缀或上下文。
-
@keyframes、@media、伪类（:hover）、伪元素（::before）完全无法用style定义 -
display: contents在旧版 Safari 中不支持行内写法，会退化为display: block - 自定义属性（
--main-color）可以写进style，但必须带双横线：style="--main-color: #333"，且 JS 读取要用getComputedStyle(el).getPropertyValue('--main-color') -
clip-path行内可用，但函数参数里的空格和括号必须严格匹配，写成clip-path: polygon(0 0, 100% 0, 100% 100%)才有效，少个空格就整个失效
性能和可维护性上，行内样式到底亏在哪
它快在渲染，慢在更新和调试——每次改 style 都触发重排，而且没法用 DevTools 的“Styles”面板批量追踪来源。
立即学习“前端免费学习笔记（深入）”；
- JS 频繁修改
element.style.left或top会强制同步布局（forced synchronous layout），比改 class 慢一个数量级 - 服务端渲染（SSR）中，
style字符串无法被 CSS 提取工具（如 MiniCssExtractPlugin）收集，导致关键 CSS 丢失 - 无障碍（a11y）检查工具通常跳过行内样式，
color和background-color对比度是否达标，得靠人工核对 - 如果项目用了 CSS-in-JS 库（如 Emotion），别混用原生
style—— 同一元素上两种机制冲突，DevTools 里样式来源混乱，定位 bug 成本翻倍
opacity）、服务端直出的不可变视觉变量、或者极简静态页。一旦涉及交互、响应式或多人协作，它带来的调试成本远超那点手写便利。 
