只在单次、临时、不可复用的样式调整时才用行内样式，如临时强调或JS动态设色；它违背结构与样式分离原则，存在无法复用、难以维护、优先级过高三大问题。
什么时候该用 style 属性写行内样式？
只在「单次、临时、不可复用」的样式调整时才考虑行内样式。比如给某个 <p></p> 加个临时红色强调，或者动态生成的元素需要根据 JS 状态即时设色（如 element.style.color = 'red'），这时候它最直接、无依赖、不污染全局。
行内样式为什么不能当主力用？
它违背了「结构与样式分离」的基本原则，也带来三个硬伤：
- 无法复用：每个要红字的
<span></span>都得重复写style="color:red" - 无法维护：改主题色？得全文搜索所有
style=并逐个替换，漏一个就错一个 - 优先级过高：一旦写了
style="font-size:14px"，哪怕外部 CSS 里写了.text { font-size: 16px !important }，也可能被绕过（除非加!important，但那又埋下新坑）
哪些情况看似合理，实则危险？
这些是新手常踩的“伪合理”陷阱：
- 「就改一个按钮，图省事写行内」→ 后续加第二个同款按钮，立刻复制粘贴失控
- 「用 JS 拼 HTML 字符串时顺手加
style」→ 应该用 class + CSS 规则控制，否则响应式断点、暗色模式全失效 - 「邮件模板里写行内样式」→ 这反而是少数正当场景（因多数邮件客户端屏蔽外部 CSS），但必须严格验证兼容性，且不能混用
@media或变量
真要用，必须守住这三条底线
如果非用不可，务必做到：
立即学习“前端免费学习笔记（深入）”；
-
style属性值必须符合 CSS 语法：color: #333; margin: 0;，不能写成color=#333或漏掉分号 - 只写「原子级」样式：仅限
color、background-color、display等单一控制项，绝不写复合规则（如同时设字体、大小、行高） - 永远检查是否已有对应 class：比如已有
class="btn-primary"，就别再补style="background:#007bff"—— 这说明 CSS 文件没管住它，该修的是 CSS，不是打补丁
<p style="color: #e74c3c; font-weight: bold;">紧急提示</p> <!-- ✅ 合理：单次、语义明确、不可复用 --> <div style="width: 200px; height: 200px; background: linear-gradient(45deg, #f00, #00f);"></div> <!-- ❌ 危险：渐变写死在行内，换主题时完全无法批量更新 -->
真正棘手的不是“会不会写 style”，而是“能不能在敲下第一个双引号前，先问一句：这个样式，是不是本该由 class 控制？”——这个问题，比语法本身更决定项目后期能不能喘口气。
