内联样式不该成为布局主干，因其导致结构失控、调试困难、响应式失效；应优先用 class 控制样式，仅在动态逻辑等必要场景谨慎使用。
内联样式不是不能用，而是不该成为布局主干——它会迅速让结构失控、调试变难、响应式失效。
为什么 style="..." 在布局中容易翻车
内联样式优先级最高，但这也意味着它会强行覆盖外部 CSS 中的 flex、grid、媒体查询断点等关键规则。一旦你在多个 <div> 上写 <code>style="width: 200px; margin: 10px;"，后续想统一改成 180px 或适配小屏时，就得逐个改 HTML，而不是改一处 CSS。
- 无法被浏览器缓存，每次加载都重复传输样式字符串
- 破坏 HTML 的语义性：一个
<article></article>不该自己决定 margin，而应由类名（如card）在 CSS 中定义行为 - 媒体查询完全失效——
@media (max-width: 768px)拿不到内联样式的控制权 - 开发者工具里看到的 computed styles 里全是 inline，掩盖了真实样式来源，排查冲突极慢
用 class 替代 style 布局的实操要点
把“视觉表现”从 HTML 标签里抽出来，交给 class 控制，是现代协作的基础。比如你想让一组卡片水平排列、等宽、有间距：
- 别这么写：
<div style="display: flex; gap: 16px;"><div style="flex: 1; padding: 12px;">... <li>改成这样：<code><div class="card-grid"><div class="card">...，然后在 CSS 文件里写：<pre class="brush:php;toolbar:false;">card-grid { display: flex; gap: 16px; }<br>.card { flex: 1; padding: 12px; }</pre> <li>需要响应式？直接加媒体查询：<pre class="brush:php;toolbar:false;">@media (max-width: 600px) { .card-grid { flex-direction: column; } }</pre> </li> <li>要复用到其他页面？只需引入同一份 CSS，无需复制粘贴 style 属性</li> <h3>哪些场景下 <code>style确实绕不开内联样式不是原罪，关键看是否服务于动态逻辑或临时覆盖。以下情况可接受，但需克制：
- JavaScript 动态设置尺寸：比如拖拽调整
<div> 宽度，用 <code>element.style.width = newWidth + 'px' - 服务端渲染时注入个性化值：如用户头像尺寸由后端计算后写入
style="width: {{size}}px" - 邮件模板：多数邮箱客户端不支持外部 CSS，只能靠内联样式保底
- 快速调试：临时加
style="border: 1px solid red"查盒模型，验证完立刻删掉
真正卡住项目进度的，往往不是“会不会写 Flex”，而是 HTML 里散落着几十个
style属性，导致改一个间距要搜五次、不敢动、不敢删。布局的稳定性，始于把样式决策权交还给 CSS 文件，而不是塞进每个标签的 attribute 里。 - JavaScript 动态设置尺寸：比如拖拽调整
