class 是语义分组工具，style 是样式覆盖手段；class 用于定义元素类别并支持响应式、伪类等，style 仅限内联样式且功能受限，95% 场景应优先使用 class。
class 和 style 的本质定位完全不同
class 是语义分组工具，style 是样式覆盖手段。前者回答“这个元素属于哪一类”，后者回答“此刻它必须长这样”。用错场景会导致维护成本飙升、响应式失效、团队协作卡壳。
修改 DOM 时 class 切换比反复写 style 更安全
JS 动态控制样式时，elem.classList.add('active') 比 elem.style.backgroundColor = 'red' 更可靠：
-
classList不会清空已有内联样式，而elem.style.xxx =赋值会覆盖整个style属性（除非你手动拼接字符串） - 切换
class不触发重排（reflow），直接改style属性可能连续触发多次重排，尤其在循环中 -
class可以复用 CSS 中定义的:hover、@media、--color等能力，style完全不支持
浏览器对 style 属性的解析限制很硬
style 属性只接受标准 CSS 声明，且仅作用于可渲染元素。常见误用包括：
- 给
<meta>或<script>加style="display:none"—— 浏览器直接忽略，因为这些标签不参与渲染 - 写
style=":hover { color: red }"或style="@media (max-width:480px) { ... }"—— 整条声明被丢弃，语法不合法 - 试图用
elem.style.setProperty('--theme', 'dark')注册 CSS 自定义属性 —— 不生效，style不进 CSSOM
真正需要内联 style 的场景其实非常有限
日常开发中，95% 的样式应走 class + 外部 CSS；只有以下情况才该碰 style：
立即学习“前端免费学习笔记（深入）”；
- HTML 邮件模板（Outlook 等客户端只认
style属性） - SSR 首屏关键样式（为减少请求，把首屏可见区域的
style内联进 HTML） - JS 拖拽/动画过程中实时更新
transform或opacity（此时切 class 有延迟或触发多余重绘） - 调试时临时覆盖某元素样式（上线前必须删掉）
多数人写 style 是因为“图快”，但很快就会发现：它无法响应屏幕尺寸变化，不能被主题系统接管，也不能被其他开发者直观理解意图——这些代价，往往在项目第二个月才开始显现。
