style属性仅适用于可渲染的视觉元素，必须用kebab-case、分号分隔声明，禁用伪类/媒体查询；它优先级最高但难维护，仅应动态计算样式或第三方限制时使用。
直接用 style 属性就能控制单个元素样式，但滥用会导致维护困难、CSS 优先级混乱、响应式失效——它只该用于临时调试或极少数无法用 class 覆盖的场景。
什么时候必须用 style 属性
不是“能用”，而是“不得不”用：style 是唯一能在运行时动态计算并直接写入 DOM 的样式方式，比如根据 JS 计算出的宽度、颜色值、transform 偏移量。
- 需要绑定 JS 变量：如
<div style="width: ${calculatedWidth}px;">（模板字符串中拼接） <li>第三方组件不暴露 class 接口，又要求覆盖内联尺寸（如某些图表库的容器高度）</li> <li>服务端渲染时需注入首屏关键样式（避免 FOUC），且无法提前生成 CSS 文件</li> <li> <code>style中的z-index、top、left等定位值由逻辑实时决定，无法预设 class - ✅ 正确：
<p style="margin-top: 8px; background-color: #eee;"></p> - ❌ 错误：
<p style="marginTop: 8px"></p>（驼峰无效）、<p style="margin:0"></p>（缺引号）、<p style="color:red;font-size:14px"></p>（缺分号，部分浏览器会忽略后续声明） - ⚠️ 注意：
display: none和visibility: hidden效果不同，前者不占布局空间，后者仍占位 - ⚠️ 注意：
style里不能写媒体查询、伪类（如:hover）、CSS 变量（如--main-color）——这些必须走外部/内部 CSS - 调试时看到元素明明有 class 定义了
color: red，却显示黑色？先检查style是否写了color: black - 用
getComputedStyle(element).color查到的是最终生效值，但element.style.color只返回style属性里显式写的值（可能为空字符串） - React/Vue 等框架中，
style绑定（如:style="{ color: textColor }"）本质仍是渲染style属性，同样继承该风险 - 无障碍工具（如屏幕阅读器）不会因
style隐藏内容就跳过它；若用style="display:none"隐藏关键信息，可能破坏可访问性 - 主题切换（深色/浅色）：定义
:root { --bg-color: #fff; }，再用class="theme-dark"切换根变量值 - 状态反馈（加载中、禁用）：写
.btn--loading { opacity: 0.6; pointer-events: none; }，JS 控制 class 切换 - 尺寸适配：用
clamp(1rem, 4vw, 1.5rem)替代 JS 计算后写style - 动画控制：用
@keyframes+animationclass，而非手动改style.transform
style 属性的语法和常见错误
它本质是把一条 CSS 声明塞进 HTML 标签，但格式更严格：所有属性名必须是 kebab-case（连字符小写），不能用驼峰；多个声明必须用英文分号 ; 分隔，结尾分号可省略但建议保留；引号必须包裹整个值，双引号最稳妥。
为什么 style 优先级最高却最危险
因为它的层叠权重是 1000，高于任何 class（10）、id（100）甚至 !important 在外部规则里的表现。一旦写死在标签上，就只能靠 JS 动态改 element.style.xxx 或用 !important 强顶，极易引发样式冲突。
替代方案：什么情况下该放弃 style 改用 class
只要样式规则不依赖运行时变量，就该用 class。现代开发中，95% 的“看起来要写 style”的场景，其实可以用 CSS 自定义属性 + class 解决。
真正难处理的，是那些需要像素级精确控制、且数值来自 canvas 测量、滚动位置、或用户拖拽坐标的地方——这些才是 style 不可替代的战场。
