行内样式不该常用，因其优先级最高却无法复用、继承和响应式控制，调试维护困难且不支持深色模式等媒体查询。
行内样式 style 属性为什么不该常用
行内样式直接写在 HTML 标签的 style 属性里，比如 。它优先级最高，能强行覆盖外部或内部样式，但代价明显：完全无法复用、无法继承、无法用媒体查询响应式控制。调试时浏览器开发者工具里会显示为 element.style，但改起来得逐个标签手动修，一旦页面有 20 个同类型按钮，改颜色就得点 20 次。
常见误用场景包括：用 JS 动态设置单个元素宽高（如 el.style.width = '200px'）后忘记清理，导致后续 CSS 规则失效；或为了“快速见效”在模板里硬写 style，结果上线后发现深色模式适配全崩了——因为 @media (prefers-color-scheme: dark) 对行内样式无效。
外部样式表
外部 CSS 文件通过 引入，是工程化项目的事实标准。但它不是万能的：首次加载会阻塞 HTML 解析（除非加 media="print" 或 rel="preload" 提前获取），且所有规则都在一个作用域里，.btn 冲突了就得靠 specificity 硬刚，或者手动加命名空间前缀。
实际要注意的点：
立即学习“前端免费学习笔记（深入）”；
- 路径错误时浏览器只报
Failed to load resource: net::ERR_ABORTED，不提示具体哪行引用错了 - 缓存问题：更新 CSS 后用户可能还在用旧版，得靠文件哈希（如
main.a1b2c3.css）或版本参数（main.css?v=2）解决 - 大型项目里，把所有样式塞进一个
main.css会导致首屏关键 CSS 过大，应拆出critical.css内联，其余异步加载
什么时候该用
内部样式写在 HTML 的 标签里，适合小而独立的页面，比如营销落地页、邮件模板、或 SSR 渲染后需要首屏直出样式的场景。它比外部样式少一次 HTTP 请求，又比行内样式好维护。
但要注意：
-
必须放在里，放底部会导致页面先无样式渲染（FOUC） - 不能用
@import引其他 CSS 文件——它会阻塞渲染且不被所有浏览器支持 - 如果页面由多个组件拼接（如 CMS 页面块），各模块的
可能互相污染，比如都定义了h1 { margin: 0; }
CSS-in-JS 和 @layer 正在改变老规矩
现代框架（React/Vue）里，CSS-in-JS 方案（如 Emotion、Styled Components）本质是运行时生成行内样式或动态 标签，解决了作用域隔离问题，但带来了 JS 执行开销和 SSR 提取复杂度。而原生 CSS 新特性 @layer（Chrome 107+）允许显式声明层叠顺序：@layer base, components, utilities;，让外部样式也能结构化管理优先级，不用再靠疯狂加 !important 或冗长选择器。
真正容易被忽略的是：无论用哪种方式，!important 在外部样式里一旦滥用，就会让行内样式彻底失控；而 CSS 自定义属性（--primary-color）必须定义在 :root 或有效作用域内，否则 var(--primary-color) 会退回到 fallback 值，连报错都不会有。
