内联样式优先级最高但仅适用于临时调试、邮件模板等场景，外部样式表才是工程常态；应避免混用导致覆盖混乱和缓存问题，推荐通过className切换样式而非直接操作style。
内联样式用 style 属性，但只适合临时调试
直接在 HTML 标签里写 style="color: red; font-size: 14px;" 就是内联样式。它优先级最高，能快速验证某个样式是否生效，比如改一个按钮颜色看效果。但问题也很明显：style 值没法复用、无法被 JavaScript 动态管理类名、维护时要到处改、还污染 HTML 结构。
常见错误现象：div style="margin: 0; padding: 0;" 写了十次，后来想统一加 box-sizing: border-box，就得手动找十处——漏改一处就错位。
- 适用场景：临时占位、服务端生成一次性静态页、邮件模板（部分客户端只认内联）
- 不适用场景：任何需要复用、响应式、主题切换或多人协作的项目
- 注意：
!important在内联里默认生效，但会进一步锁死后续覆盖能力
外部样式表用 <link rel="stylesheet">，才是工程常态
把 CSS 写进 style.css 文件，再用 <link href="style.css" rel="stylesheet"> 引入。浏览器会缓存这个文件，HTML 只管结构，CSS 只管表现，分工清晰。
性能影响很实际：首次加载多一次 HTTP 请求（现代用 HTTP/2 或 preload 可缓解），但后续页面全走缓存；而内联样式每次 HTML 都得重传一遍 CSS 冗余代码。
立即学习“前端免费学习笔记（深入）”；
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 路径必须写对：
href="css/style.css"和href="./css/style.css"在不同构建工具下行为可能不同 - 避免用
@import替代<link>：它会阻塞并串行加载，拖慢渲染 - 如果用 Webpack/Vite，
import './style.css'本质还是生成<link>，不是内联
真要动态改样式？别硬拼内联，用 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 设了 .card { width: 300px; }，又在 HTML 里写 <div class="card" style="width: 400px;">，最终宽度就是 400px —— 因为内联样式的特异性（specificity）高于任何选择器。这看似“方便”，实则埋雷。
更隐蔽的问题是缓存：外部 CSS 更新了，但 HTML 模板里还留着旧的 style 值，结果新旧规则打架，DevTools 里看到的计算样式（Computed）和源码对不上。
- 上线前检查：用浏览器开发者工具的 Elements 面板，筛选所有带
style属性的标签，评估是否真有必要 - 构建工具（如 PostCSS）可配置插件自动剥离开发期残留的
style属性 - 团队规范里明确禁止在生产 HTML 中出现
style属性，除非有强理由并加注释
