内联样式适合覆盖第三方组件默认样式、服务端渲染首屏关键样式，但不适用于响应式或主题切换；应使用 style 对象而非字符串，仅限几何/颜色/排版类属性，慎用 transform/transition。
内联样式适合覆盖第三方组件默认样式
当使用 UI 框架（如 Ant Design、Element Plus）或嵌入第三方 SDK（如地图、支付弹窗）时，其内部样式往往带强优先级或 scoped 封装，class 或 :global 覆盖成本高。此时用内联样式可跳过层叠计算，直接生效。
常见错误现象：!important 失效、CSS Modules 类名不匹配、Shadow DOM 样式穿透失败。
- 只对单个元素临时调整，比如改一个按钮的
padding或图标颜色 - 避免污染全局样式表，尤其在微前端或插件化场景中
- 配合 JS 动态控制（如根据状态切换背景色），比切换 class 更直白
内联样式适合服务端渲染（SSR）首屏关键样式
为减少 FOUC（Flash of Unstyled Content），部分 SSR 框架（如 Nuxt、Next.js）允许将首屏必需样式内联到 HTML 的 <style> 标签里，但“内联样式”特指 style 属性——它比 <style> 块更轻量、无解析延迟，且无需额外提取逻辑。
使用场景：首屏卡片高度固定、加载占位图尺寸、字体 fallback 行高。
立即学习“前端免费学习笔记（深入）”；
- 仅用于不可被复用、且必须在 HTML 解析阶段就确定的样式
- 不适用于响应式断点（
min-width无法在style属性中生效） - 注意：Vite / Webpack 构建时若启用 CSS 提取（
extractCSS），内联样式不会被压缩或去重
内联样式不适合响应式或主题切换场景
style 属性不支持媒体查询、自定义属性（var(--color) 可用但无法被 CSS 变量系统接管）、伪类（:hover、::before）和伪元素，一旦写死就失去 CSS 的动态能力。
典型翻车点：用 style="width: 100%" 替代 max-width: 100% 导致图片在小屏溢出；或用 style="color: #333" 硬编码主题色，后续换肤时需 JS 遍历 DOM 批量替换。
- 所有需要基于 viewport、用户偏好（prefers-color-scheme）、或运行时状态变化的样式，都该交给 CSS 规则
-
style中可安全使用的 CSS 属性限于：几何类（width、top）、颜色类（color、background）、基础排版（font-size、line-height） - 慎用
transform和transition内联——它们会覆盖外部声明的动画，且难以通过 JS 精确读取当前值
React/Vue 中用 style 对象比字符串更可控
直接拼接字符串（如 style="color: red; margin: 0"）难维护、易 XSS（若插入用户输入）、不支持驼峰命名；而框架提供的 style 对象（React 的 style={{}}，Vue 的 :style="{}"）自动处理前缀、空值过滤和单位补全。
示例对比：
/* ❌ 不推荐：字符串硬编码，单位缺失，无法条件合并 */
<div style="opacity: 0.5; transform: translateX(10px)">
<p>/<em> ✅ 推荐：对象形式，JS 可控，单位自动补（除数字 0） </em>/
<div :style="{ opacity: isHidden ? 0.5 : 1, transform: <code>translateX(${offset}px)</code> }">- 数值型属性（
top、fontSize）会自动加px，但zIndex、opacity、order不加 - 用
Object.assign或展开运算符合并多个 style 对象，比字符串拼接更可靠 - 不要在
style对象里写!important——它无效，且掩盖了本该由 CSS 规则解决的优先级问题
内联样式的真正价值不在“快”，而在“隔离”——它把样式决策锁死在元素粒度，绕过选择器权重、作用域边界和构建流程。一旦开始用 JS 控制 style，就得接受它不再参与 CSS 的层叠、继承与媒体查询体系。这个代价，比想象中更常被忽略。
