内联样式优先级最高但仅适用于临时调试、邮件模板等场景，外部样式表才是工程常态；应避免混用导致覆盖混乱和缓存问题，推荐通过className切换样式而非直接操作style。
内联样式用 style 属性，但只适合临时调试
直接在 HTML 标签里写 style="color: red; font-size: 14px;" 就是内联样式。它优先级最高，能快速验证某个样式是否生效，比如改一个按钮颜色看效果。但问题也很明显：style 值没法复用、无法被 JavaScript 动态管理类名、维护时要到处改、还污染 HTML 结构。
常见错误现象：div style="margin: 0; padding: 0;" 写了十次，后来想统一加 box-sizing: border-box，就得手动找十处——漏改一处就错位。
- 适用场景：临时占位、服务端生成一次性静态页、邮件模板（部分客户端只认内联）
- 不适用场景：任何需要复用、响应式、主题切换或多人协作的项目
- 注意：
!important在内联里默认生效，但会进一步锁死后续覆盖能力
外部样式表用
把 CSS 写进 style.css 文件，再用 引入。浏览器会缓存这个文件，HTML 只管结构，CSS 只管表现，分工清晰。
性能影响很实际：首次加载多一次 HTTP 请求（现代用 HTTP/2 或 preload 可缓解），但后续页面全走缓存；而内联样式每次 HTML 都得重传一遍 CSS 冗余代码。
立即学习“前端免费学习笔记（深入）”；
- 路径必须写对：
href="css/style.css"和href="./css/style.css"在不同构建工具下行为可能不同 - 避免用
@import替代：它会阻塞并串行加载，拖慢渲染 - 如果用 Webpack/Vite，
import './style.css'本质还是生成，不是内联
真要动态改样式？别硬拼内联，用 className 切换更可控
想让按钮点击后变色？不要用 element.style.color = 'blue'，而是提前写好 CSS 类：.btn--active { color: blue; }，再用 JavaScript 控制 element.classList.add('btn--active')。
这样做的好处是：样式逻辑仍在 CSS 文件里，支持伪类（:hover）、媒体查询（@media）、动画（@keyframes），且可被 DevTools 审查和修改。
- React/Vue 中同理：用
className={isActive ? 'btn--active' : 'btn'}，而不是style={{ color: isActive ? 'blue' : 'black' }} - 极端情况需 JS 计算样式（如拖拽定位），优先用
transform而非top/left，避免触发重排
内联样式和外部样式混用时，优先级和缓存容易出岔子
当外部 CSS 设了 更隐蔽的问题是缓存：外部 CSS 更新了，但 HTML 模板里还留着旧的 .card { width: 300px; }，又在 HTML 里写 style 值，结果新旧规则打架，DevTools 里看到的计算样式（Computed）和源码对不上。
实际项目里，外部样式表是默认选择，内联样式只是调试过程中的短暂停靠点。真正难的是在组件化、主题切换、SSR 等场景下保持样式作用域不泄露——那已经不是选内联还是外链的问题，而是怎么组织 CSS 的问题了。style 属性的标签，评估是否真有必要style 属性style 属性，除非有强理由并加注释
