根本原因是原子类特异性（0-0-1-0）低于scoped样式带data-v-xxx的选择器（0-0-1-1），导致被覆盖；解法包括改unocss的enforce为'pre'、启用mode: 'vue-scoped'对齐权重，或用@layer分层控制应用顺序。

原子类和业务类并存时样式不生效，根本原因不是“写错了”，而是特异性（specificity）被压——业务类如 .card__header 权重是 0-0-1-0，而第三方组件或 scoped 样式里带 data-v-xxx 的规则是 0-0-1-1，原子类直接输在起跑线。

为什么 px-4 这类原子类总被 scoped 样式覆盖

Vue / Nuxt 的 <style scoped></style> 会自动给选择器加上属性匹配，比如生成 .btn[data-v-abc123]，特异性变成 0-0-1-1；而 UnoCSS 或 Tailwind 默认生成的 px-4 对应规则只是 .px-4（0-0-1-0）。浏览器按位比权重，第三位都是 1，第四位 1 > 0，后者必败。

• 不要改业务类加 !important —— 它会让后续所有覆盖都陷入“谁更狠”循环
• 检查 DevTools 的 Styles 面板：被划掉的原子类旁会显示 specificity is lower than another rule，点开看具体值
• 若用 UnoCSS，把 enforce: 'post' 改成 enforce: 'pre'，让原子样式注入到 更靠前位置（但仅对非 scoped 场景有效）
• 更稳的解法是启用 mode: 'vue-scoped'，UnoCSS 会主动为原子类加上相同的 data-v-xxx 属性，权重自然对齐

如何让原子类和 BEM 类在同一个元素上和平共处

混用 card__title font-bold text-lg 看似方便，实则埋雷：font-bold 和 card__title 职责重叠，团队无法判断哪部分该进组件逻辑、哪部分算临时补丁。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 根元素（block）禁用原子类：<div class="product-card"> —— 只允许 BEM 类 <li>叶子节点可组合：<code><h3 class="product-card__title tw-font-bold tw-text-lg"></h3>，前提是启用了 prefix: 'tw-'
• 高频组合要收口：比如 tw-bg-blue-600 tw-text-white tw-rounded 出现三次以上，就该封装成 product-card__title--highlight
• 避免 modifier 上叠原子类：button--disabled opacity-50 是反模式；应把 opacity-50 和 cursor-not-allowed 写进 button--disabled 的 CSS 块里

@layer 是目前最干净的层级治理手段

CSS 原生 @layer 让你不用拼特异性，靠声明顺序定胜负。UnoCSS 支持通过 layers 配置项自动包裹生成的原子类，无需手写 @layer utilities。

• 在 uno.config.ts 中定义：layers: ['reset', 'base', 'tokens', 'components', 'utilities']
• 自定义按钮变体写进 components 层，原子类自动归入 utilities 层 —— 即使选择器权重相同，components 也会后应用、更高优
• 注意兼容性：Safari 15.4+、Chrome 99+ 才支持完整 @layer；旧版需 fallback，比如只对 [data-layer="components"] 加 !important（仅限该环境）
• 别手动用 @layer utilities { .px-4 { ... } } —— UnoCSS 会自动处理，手写容易漏、错、重复

真正难的不是让样式生效，而是让下一个人一眼看懂这个 text-sm 是设计规范的一部分，还是某次紧急上线随手加的补丁。前缀、分层、作用域，都是在给语义留路标，而不是给浏览器加权重。