内联样式局限与CSS分离技巧

内联样式看似便捷，实则暗藏维护陷阱：它与HTML结构深度耦合，无法复用、不响应媒体查询与伪类、破坏继承控制，更让协作、调试和性能优化举步维艰；真正可持续的解法是坚决抽离至外部CSS——借助模块化文件组织、浏览器缓存、构建工具优化及CSS变量动态控制，实现高可维护性与高性能；仅在极少数场景（如SPA首屏骨架CSS）下谨慎内嵌，且须严格遵循media声明与内容精简原则；面对第三方内联样式，应绕开硬覆盖，转而通过高特异性选择器、initial重置或transform动画等现代方案优雅接管。

内联样式为什么改不了、不敢动、修不完

它不是“写错”，而是设计上就拒绝被维护。一旦在 style 属性里写了 color: #333，这个值就和 HTML 结构死绑在一起，无法被复用、无法被媒体查询控制、无法被伪类（如 :hover）响应，更没法继承给子元素。

常见错误现象：

• 你改了 main.css 里的 .btn 颜色，但按钮还是旧的——因为某个 强行覆盖了它
• 想给所有标题加统一过渡效果，却发现每个
  都得手动加 transition，漏一个就断层
• 用 document.querySelector 批量操作样式时，element.style.marginLeft 返回空字符串——因为那值根本没写在 style 上，是计算后得来的

使用场景极少：仅限服务端渲染不可预测尺寸的 SVG 元素（如 ），且必须校验 x、y、r 是合法数字，不能拼接用户输入。

外部样式表不是“多一步”，而是少十处故障点

把样式抽成 base.css、layout.css、components.css 并用 引入，不是为了“看起来规范”，是为了解决真实问题：

• 浏览器能缓存 components.css，10 个页面共用一份，加载一次，后续全走内存
• 构建工具（如 Vite）能自动提取、压缩、按需分割 CSS；而内联样式只能靠正则硬删，极易误伤
• 多人协作时，设计师改主题色只需动 variables.css 一行，而不是 grep 全项目找 style="background: #007bff"
• DevTools 的 Styles 面板只显示一套来源清晰的规则，不会出现两套 .card 类，一套来自