UnoCSS默认以enforce: 'post'注入样式，位于<head>末尾，但Vue scoped样式因含data-v-xxx属性选择器（特异性0-0-1-1）高于UnoCSS原子类（0-0-1-0），故后者被覆盖；改enforce为'pre'或启用mode: 'vue-scoped'可对齐权重。
原子化CSS框架（如 UnoCSS、Tailwind）本身不靠选择器权重竞争，但一旦和组件库、手写CSS或 scoped 样式混用，!important 就不是解法——真正要动的是注入顺序、层叠层级和作用域边界。
UnoCSS 默认注入顺序为什么总赢不过 scoped 组件样式？
UnoCSS 默认以 enforce: 'post' 插件阶段注入样式，即在 <head> 末尾追加 <style> 标签。而 Vue 的 scoped 样式会生成带 data-v-xxx 属性的选择器，比如：
.v-btn[data-v-abc123] { padding: 0.5rem; }
这种选择器特异性是 0-0-1-1（类 + 属性），比 UnoCSS 的 px-4（0-0-1-0）高一位。结果就是：哪怕你写了 px-4，scoped 样式仍生效。
- 改法不是加
!important，而是让 UnoCSS 样式「晚于」scoped 样式加载 → 把enforce改成'pre'或显式控制transformerCompileClass的触发时机 - 更稳妥的做法是启用
mode: 'vue-scoped'，让 UnoCSS 只处理带data-v-xxx属性的元素，生成带相同属性的选择器，权重自然对齐 - 注意：Vite 插件链中若存在其他 CSS 处理插件（如
rollup-plugin-postcss），需确认其执行顺序不覆盖 UnoCSS 的输出
如何用 @layer 主动管理原子类与自定义样式的层级关系？
CSS 原生 @layer 是目前最干净的优先级治理手段，UnoCSS 已支持通过 layers 配置项声明层级。典型场景是：既要保留 Tailwind 风格的原子类，又要确保组件主题色不被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 在
uno.config.ts中定义层级顺序：layers: ['reset', 'base', 'tokens', 'components', 'utilities'] - 把你的自定义主题变量、按钮变体等写进
components层，原子工具类自动归入utilities层 —— 这样即使两者选择器权重相同，components也会后应用、更高优 - 避免手动写
@layer utilities包裹原子类；UnoCSS 会按配置自动包裹，手写反而易错 - 注意浏览器兼容性：Safari 15.4+、Chrome 99+ 支持完整
@layer，旧版需降级 fallback（如用!important仅限该环境）
为什么给原子类加前缀（如 tw-）能缓解 BEM 混用时的语义混乱？
当一个元素同时有 card__header 和 text-lg font-bold，开发者无法判断 text-lg 是临时补丁还是设计规范的一部分。加前缀不只是防命名冲突，更是做语义分层。
- 在
tailwind.config.js或uno.config.ts中设prefix: 'tw-'，所有原子类变成tw-text-lg、tw-flex，从命名上就和 BEM 类card__header划清职责边界 - BEM 类名表达「这是什么」（结构语义），
tw-类名表达「它看起来怎样」（视觉行为），二者不再争夺同一层解释权 - 团队协作中，新人看到
<h2 class="card__title tw-font-bold tw-text-xl">，能立刻识别出哪部分可复用、哪部分属于组件契约 - 切忌只加前缀却不约束使用范围：根元素（block）禁止用
tw-类，否则破坏 BEM 的封装意图
真正难的不是让某个类生效，而是让所有人——包括半年后的自己——一眼看懂这个样式为什么在这里、能不能删、改了会影响谁。优先级只是表象，背后是作用域意识、分层契约和工具链协同。
