内联样式仅适用于服务端生成的不可变原子样式和JS动态计算的实时像素值；@import不安全，应改用构建工具或link并行加载；link顺序决定层叠，media属性影响阻塞；CSS-in-JS SSR需显式提取并正确注入style标签。
内联样式 vs style 属性？
除非是服务端渲染后一次性注入的动态样式，或者极简静态页（如邮件模板、微前端子应用首屏骨架），否则不要在 HTML 元素上写 style="color: red; margin: 0"。它无法复用、无法缓存、无法被 CSS-in-JS 工具处理，还会污染 DOM 结构。真正适合它的场景只有两个：服务端生成的不可变原子样式（比如通过 SSR 注入的字体大小或主题色）和JS 动态计算后必须实时绑定的像素值（如拖拽元素的 transform 或弹窗位置）。其他所有“图方便”的内联写法，后期都会变成审查时的红色高亮。
@import 在 CSS 文件中是否安全？
不安全，尤其在线上环境。@import 会阻塞后续样式的解析与加载，且浏览器无法并行下载被导入的文件。例如 @import url("theme.css") 出现在 main.css 开头，会导致 main.css 解析暂停，直到 theme.css 完全下载并解析完毕。现代项目应统一用构建工具（Webpack/Vite）做依赖分析，或直接用 并行加载。仅在开发阶段调试变量时，可临时用 @import 引入局部 SCSS 文件，但上线前必须移除。
多个 media 属性怎么影响渲染？
顺序决定层叠优先级，media 属性决定是否阻塞渲染。关键点：
- 浏览器按
出现顺序依次下载、解析、应用样式，后面规则可覆盖前面同选择器的声明 - 未加
media或media="all"的样式表会阻塞首次渲染（FOUC 风险低，但白屏时间拉长） -
media="print"或media="(min-width: 768px)"的样式表不阻塞渲染，但匹配条件满足后仍会触发重排 - 移动端首屏关键 CSS 应内联（
），非关键部分用media延迟加载，例如：（配合 JS 切换 media 实现懒加载）
CSS-in-JS 库（如 Emotion、Styled Components）在 SSR 场景下的样式提取陷阱
服务端渲染时，CSS-in-JS 不会自动把组件用到的样式吐到 HTML 头部——你得显式调用库提供的提取函数，否则客户端水合（hydration）时样式缺失，导致闪动或错位。例如 Emotion 要用 cache.extract()，Styled Components 要用 ServerStyleSheet 的 collectStyles 方法。漏掉这步，就等于把样式逻辑留在了 JS 执行阶段，破坏了关键 CSS 提前下发的原则。另外，提取后的样式字符串必须插入到 中的 标签里，不能拼进 HTML 字符串再当纯文本输出，否则会被浏览器忽略（需设置 dangerouslySetInnerHTML 或等价机制）。
立即学习“前端免费学习笔记（深入）”；
实际项目里最常被忽略的，是构建产物中 CSS 文件的integrity 属性缺失与 preload 策略错配——这两处不细调，首屏性能优化就只做了半程。 
