用途
css-modern 用于规范现代化 CSS 的编写方式：把设计令牌作为系统契约，保持选择器和特异性可维护，优先使用原生 CSS 能力替代 Sass 时代的旧式变通写法。
主要能力
设计令牌（DTCG 优先）：推荐用 DTCG 令牌格式（$value、$type、$description、别名引用）作为规范令牌数据，映射为全局与语义作用域下的 CSS 自定义属性；语义令牌名保持稳定，允许其背后的值变化；组件中尽量避免硬编码值。
框架管线桥接：Vue/Nuxt/Quasar 在 SFC 样式块中直接使用 CSS 变量，v-bind() 仅用于组件响应式值；Tailwind v4 将令牌放在 @theme 中并与 CSS 变量命名对齐，使工具类与原生 CSS 共享同一来源。
级联控制：一次性声明全局 @layer 顺序，把第三方 CSS 通过 @import ... layer(vendor) 导入专用 vendor 层，用层避免特异性不断升级。
原生嵌套：用于状态选择器、局部后代和就近查询，嵌套深度不超过 3 层，避免与 DOM 深度耦合的选择器。
容器查询：在组件边界设置 container: <name> / inline-size 或 container-type + container-name；组件内部优先用容器查询，页面外壳布局仍用视口媒体查询；尺寸需要跟随容器时使用 cqw、cqh、cqi、cqmin、cqmax 单位。
现代选择器：:has() 处理父级/状态驱动样式，:is() 以正常特异性分组变体，:where() 提供零特异性默认值，并始终提供 :focus-visible 键盘焦点状态。
布局、尺寸与国际化：Grid/Flex 配合 gap 替代 margin 间距技巧；clamp()、min()、max()、calc() 做流式尺寸；优先逻辑属性（padding-inline、border-inline-start、inset-block）；用 aspect-ratio 替代内边距比例技巧。
颜色与主题：令牌值优先用感知色彩空间 oklch；用 color-mix() 派生变体而非手工复制色板；需要双主题时使用 color-scheme 与 light-dark()；accent-color 视为增强项而非关键样式。
动效、交互与性能：尊重 prefers-reduced-motion、对比度与强制颜色模式；以 @starting-style、transition-behavior: allow-discrete、popover 钩子作为增强模式；长列表和大量离屏内容使用 content-visibility 与 containment；用 scrollbar-gutter: stable 减少滚动条出现时的布局偏移。
使用方式
按核心工作流执行：确认令牌来源（DTCG JSON 或既有令牌注册表）；将令牌映射为运行时 CSS 自定义属性与语义别名；用 @layer 定义级联顺序并隔离 vendor CSS；用原生嵌套、现代选择器和容器查询实现组件样式；补充流式尺寸、逻辑属性和现代颜色/主题原语；用 @supports 为部分支持特性加门控并给出明确回退；最后审查无障碍、动效偏好和性能相关特性。可按需查阅 references/modern-css-source.md 获取可直接复制的模式与框架桥接示例，查阅 references/support-snapshot-2026-02.md 决定回退策略或特性门控。
渐进增强采用分层策略：安全默认层直接使用广泛支持的现代特性；增强层要求 @supports 守卫并具备可接受的回退行为；有限/实验层仅在明确理由且易于回滚时使用。
适用场景
需要统一设计令牌、控制系统级联顺序、避免特异性冲突，并希望以容器查询、现代选择器和渐进增强推进现代 CSS 落地的前端项目；也适用于引入第三方 CSS 并需要隔离其样式的场景。
限制
资料未提供该技能的具体安装方式、运行环境要求、许可证及收费信息，暂未提供。特性支持情况需依据其支持快照文档判断，本文不代为给出兼容性结论。