css应优先放在外部样式表中，因其能实现结构与样式分离、提升复用性、利用浏览器缓存加快加载；其次可选内部样式表（置于内标签中），适用于小型项目；内联样式仅用于特殊覆盖或动态场景，避免滥用。
为什么把CSS放
不是位置不对，是加载行为被悄悄绕过了。浏览器只对满足三个条件的 <link rel="stylesheet"> 才阻塞渲染：路径可访问、media 匹配当前环境、响应头 Content-Type 是 text/css。本地开发时服务器返回 text/plain，或加了 media="print" 却没回填，都会让样式变成异步加载——HTML解析完就直接画未样式化内容，FOUC必然发生。
验证方法很简单：Network 面板里点开 CSS 请求，看 Initiator 列是不是 parser；如果不是，说明它没参与阻塞链。
- 用
curl -I http://localhost/style.css检查响应头，确认Content-Type: text/css - 避免写
media属性，除非真要条件加载；若必须用，得配onload="this.media='all'" - Vite/Webpack 构建后检查最终 HTML，别信源码里的
<link>顺序——插件可能重排
多个CSS文件怎么排顺序才不打架
顺序不是“越靠后越强”，而是按依赖层级物理排列：底层支撑 → 变量定义 → 组件样式 → 页面/主题样式。错位一环，var(--color-primary) 就会回退成 initial，或者按钮边框被 normalize.css 的 border: 0 干掉。
常见翻车点：@import 写在 .css 文件里，实际加载时机晚于它所在的文件，等于主动颠倒顺序；document.head.appendChild() 动态插入的 <link> 永远在所有静态标签之后。
- reset/normalize.css 必须第一个，且不能带
media - variables.css（含
:root定义）必须紧随其后，且所有用到它的文件都得排在这之后 - 第三方 UI 库（如 Bootstrap）自带高特异性规则，自定义样式别硬堆
!important，优先用同级选择器对齐，比如改.btn-primary而不是button
内联关键CSS和外链非关键CSS怎么切分
“关键”指首屏渲染必需的样式：容器尺寸、字体族、标题颜色、导航栏结构、首屏卡片边框——这些缺一不可，必须内联进 <style></style>；其余（模态框、分页器、页脚）全扔外链，用 <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"> 延迟加载。
难点不在提取，而在判断哪些真影响首屏渲染。比如一个 article p:nth-child(2n+1) 看似无关，但它触发字体回流，可能卡住文本绘制；又比如背景图在 CSS 里，但对应 HTML 元素还没解析完，浏览器就提前占位渲染，导致白块闪动。
- 用 Lighthouse 的 “Eliminate render-blocking resources” 报告反向验证：标红的 CSS 规则大概率该内联
- 内联
<style></style>必须写在顶部，不能包在<script></script>后面，否则 JS 执行期间 HTML 解析暂停，样式注入延迟 - 构建工具（如 Vite 的
rollup-plugin-postcss）能自动提取关键 CSS，但需手动校验输出是否包含body、.hero、.nav等首屏类名
JS动态插入CSS一定会FOUC吗
会，而且无法规避——因为 fetch() + insertRule() 或 document.createElement('style') 完全绕过浏览器的 CSSOM 阻塞机制。DOM 已渲染，样式才来，视觉暂现不可避免。
哪怕你用 requestIdleCallback 延迟插入，只要不是 HTML 解析阶段原生加载的样式，就赶不上首帧绘制。微前端场景下尤其危险：子应用自己 appendChild 样式，父容器已渲染完毕，结果整个子模块闪一下再上色。
- 禁止用
document.write()注入样式（已废弃，且必然 FOUC） - SSR 场景中，服务端生成的
<style></style>必须保留，客户端 JS 不要覆盖或清空它 - 如果必须动态加载（如换肤），用
<link rel="stylesheet" href="theme-dark.css">替代 JS 注入，并监听load事件后再切换 class
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
