cxs 的样式注入顺序决定原子类是否生效，必须早于其他 css 注入以避免被覆盖；需手动控制 dom 插入点，如用 insertbefore 或预置锚点 style 标签，确保所有原子类（含媒体查询）同批、确定顺序注入。
cxs 的样式注入顺序直接决定原子类是否生效，不是“可配可不配”的选项，而是运行时样式覆盖逻辑的底层依赖。
为什么 cxs 的 insert 时机必须早于其他 CSS 注入？
原子化 CSS 的类名（如 .m-2、.text-red）本身不具备特异性优势——它们和普通 class 一样是 0,0,1,0 优先级。一旦项目中存在全局 CSS、CSS-in-JS 的 style 标签、或第三方 UI 库的样式表，后注入的规则会覆盖先注入的 cxs 规则。
例如：cxs 在 document.head 末尾插入 <style></style>，但若 antd 的 CSS 文件在 中靠前引入，它的 .ant-btn { margin: 0 } 就会压掉你写的 .m-4。
Webpack/Vite 中常见注入顺序错误场景
构建工具默认不保证 CSS 注入时序，尤其当多个插件同时操作 DOM 时：
-
css-loader+style-loader会在 runtime 动态插入，但无序号控制，可能晚于cxs - Vite 的
import 'xxx.css'是同步解析、异步注入，实际插入时间不可控 - 使用
postcss-import或@import引入的外部 CSS，其规则会被打包进主<style></style>，而该标签通常比cxs创建的更早
如何强制 cxs 的 <style></style> 插入到最前端？
不能依赖构建工具自动排序，必须手动干预 DOM 插入点：
- 修改
cxs初始化逻辑，在document.head的第一个子节点前插入：const sheet = document.head.insertBefore(document.createElement('style'), document.head.firstChild).sheet - 若用 Vite，可在
index.html的开头硬编码一个空<style id="cxs-root"></style>，然后让cxs复用该sheet，避免动态创建时机问题 - Webpack 下禁用
style-loader的自动插入，改用mini-css-extract-plugin输出静态 CSS 文件，并确保它在 HTML 中<link>位置排在cxs之后（但注意：静态 CSS 无法支持热更新，仅适用于生产）
开发时容易忽略的兼容性陷阱
浏览器对 document.head.appendChild 和 insertBefore 的执行顺序敏感，尤其在 SSR hydration 阶段：
- 服务端渲染时
cxs不执行，客户端首屏 hydrate 后才注入，此时若已有 SSR 渲染出的 class，但对应样式未加载完成，会出现 FOUC - React 18 的并发渲染可能触发多次
cxs.insert调用，若未做去重或 sheet 缓存，会导致重复<style></style>标签堆积 -
cxs默认不处理媒体查询原子类（如md:text-center）的注入顺序，这些规则需和基础类同批插入，否则响应式断点失效
insert，而是让所有原子类——无论是否带断点、是否来自不同模块、是否跨框架——始终以确定顺序出现在 前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
