大型站CSS拆分需保证级联顺序：base.css必须早于header.css加载，依赖拓扑由工具链静态分析生成序列表；按功能域（如form-controls.css）而非页面拆分；禁用@import，避免JS动态插入link；首屏关键CSS须用Puppeteer+Coverage精准提取并内联，非关键CSS用preload+JS切换rel异步加载；多团队协作需作用域隔离（CSS Modules、shadow-dom或属性前缀），全局reset由基建组统管；异步CSS插入应避开强制同步布局，用requestIdleCallback或setTimeout延后，适配Safari需trigger GPU合成。
样式表怎么拆才不破坏级联顺序
大型站的 CSS 不是“能拆就行”，而是得保证 base.css 一定早于 header.css 加载，否则导航栏可能闪出无样式的原始 HTML。关键不是文件数量，是依赖拓扑：工具链（如 PostCSS + css-tree）必须能静态分析 @import 和 CSS-in-JS 的引用路径，生成加载序列表。
- 拆分粒度按“功能域”而非“页面”，比如
form-controls.css要覆盖所有表单组件，而不是每个页面单独一份 - 避免在 JS 中动态插入
link标签加载样式——它绕过浏览器预加载器，且无法参与 critical CSS 提取 -
@import在 CSS 文件里等于阻塞式加载，大型站必须禁用，改用构建时 inline 或拼接
如何让首屏样式不被非关键 CSS 拖慢
style 标签内联关键 CSS 是底线，但“关键”不能靠经验猜。真实做法是：用 Puppeteer 抓取首屏 DOM 快照，结合覆盖率工具（如 Chrome DevTools 的 Coverage 面板）反向提取实际用到的选择器，再注入 。剩下非关键部分走异步加载。
- 异步加载不能用
rel="stylesheet"直接挂link，得用rel="preload"+ JS 动态切换rel属性，否则仍会阻塞渲染 - Webpack 的
mini-css-extract-plugin默认同步输出，需配合splitChunks.chunks: 'async'才真正分离 - 注意 SSR 场景下，服务端不能把异步 CSS 当作 critical 内联，否则客户端重复加载
多个团队共用一套样式体系时怎么避免冲突
不是靠命名规范（BEM 也救不了），而是靠作用域隔离。CSS Modules 是基础，但大型站要更进一步：用 :host + shadow-dom 封装独立组件样式，或通过构建插件给每个业务模块自动添加唯一属性前缀（如 [data-team-a]）。
- 全局重置（
reset.css）必须由基建组统一发布，各业务线禁止自行引入不同版本的 Normalize - 第三方 UI 库（如 Ant Design）要锁定
css文件路径，禁用其内部@import，改用构建时提取并重命名，避免和自研样式同名冲突 - 所有颜色/间距变量必须定义在
:root，但禁止直接写var(--color-primary)，而要用 CSS 自定义属性 + JS 运行时注入主题，方便暗色模式切换
异步加载的 CSS 如何触发重排却不卡顿
异步 CSS 插入后触发重排是必然的，但卡顿来自强制同步布局。核心是避免在 JS 中读取布局信息（如 offsetHeight）后再操作样式——这会让浏览器立刻计算旧样式，再应用新样式，形成两次 layout。
- 正确做法：用
requestIdleCallback延迟到空闲时段插入非关键样式，或监听load事件后用setTimeout(..., 0)推迟一帧 - 如果样式影响高度（如展开菜单），提前在 JS 中用
getComputedStyle读取当前值，再一次性设置新类名，避免读写交替 - 注意 Safari 对动态插入 CSS 的重排优化较弱，必要时对
body加transform: translateZ(0)触发 GPU 合成
CSS 分块本身不难，难的是每一块的加载时机、作用域边界、与 JS 生命周期的协同。最容易被忽略的，是开发者总想“一次配好”，但大型站的样式加载策略必须随路由、设备、网络类型实时调整——配置即代码，且得可测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
