用途：在编写 CSS 样式、实现布局或使用现代 CSS 特性时提供规范指导，帮助产出可维护的样式代码。
主要能力与要求：
- 主题值使用自定义属性：在 :root 定义 --color-primary、--spacing 等，通过 var() 引用，避免硬编码。
- 布局优先使用 Grid/Flexbox，替代 float。一维布局用 Flexbox，二维布局用 Grid。
- 尊重 prefers-reduced-motion，在 reduce 媒体查询下缩短动画与过渡时长。
- 现代响应式：用 clamp()/min()/max() 实现流式排版，用容器查询做组件级断点，用 aspect-ratio 替代 padding hack。
- 现代选择器：:is()、:where()（零特异性）、:has()（父级选择）。
- 级联层：用 @layer reset, base, components, utilities 控制优先级。
- 其他建议：使用逻辑属性（margin-inline、padding-block）、BEM 等一致命名、@media print 处理打印样式、prefers-color-scheme 支持深色模式、避免滥用 !important。
使用方式：作为技能在编写 CSS 时触发，按上述模式与决策树选择方案（如居中用 Flexbox place-content 或 Grid place-items；隐藏元素按 display/visibility/opacity 语义选择）。
适用场景：布局与组件样式、响应式设计、动画过渡、主题化。
限制：不适用于 Tailwind（应使用 tailwindcss 技能）或 MUI sx（应使用 mui 技能）。需跨目标浏览器测试，并验证不同字号、缩放与色盲模拟下的表现。
参考资源：https://web.dev/learn/css/ 与 https://developer.mozilla.org/en-US/docs/Web/CSS。