用途：为纯 CSS、SCSS 和 CSS Modules 提供 CSS 架构、特异性管理、主题化与布局的质量模式，用于审查样式表架构与可维护性。
主要能力与要求：用自定义属性定义语义化设计令牌，避免原始值重复；特异性预算限制为单类选择器，避免 ID 与 !important；用 @layer 建立显式层叠顺序（reset → base → components → utilities）；深色模式通过覆盖自定义属性实现，而非逐组件复制颜色；布局用 Grid 处理二维、Flexbox 处理一维，不用浮动与百分比 hack；禁止无说明的魔法数字与同一作用域混用命名约定。
使用方式：在审查 CSS/SCSS 时按上述模式检查；遇到样式不生效先查特异性，用 DevTools 查看计算样式，通过降低获胜规则的特异性而非提高失败规则来解决；需要深色模式时在 @media (prefers-color-scheme: dark) 覆盖自定义属性，并加 [data-theme="dark"] 供 JS 切换；文件顺序影响渲染时用 @layer 显式声明。
适用场景：评估 BEM、工具类或自定义属性命名；设计深色模式与主题策略；诊断特异性冲突与层叠问题。
限制：不适用于 Tailwind 工具类模式、CSS-in-JS 模式与动画性能（分别使用 tailwindcss、相关框架技能与 web-performance）。旧浏览器可用 @supports (--foo: bar) 检测，或在 var() 前写内联回退值。CSS Modules 中 :root 的自定义属性仍为全局；SCSS 变量为编译期，主题切换应优先用自定义属性。覆盖高特异性第三方库时可用 @layer 包裹其样式。