核心用法
本 Skill 聚焦于 CSS 开发中高频误用但文档稀缺的进阶知识点，按主题模块化组织：
层叠上下文（Stacking Context）：澄清 z-index 生效条件（定位元素、flex/grid 子项），并引入 isolation: isolate 作为无副作用的层叠上下文创建方式，避免滥用 position: relative。
布局陷阱（Layout Gotchas）：纠正 margin collapse 的适用范围（仅块级垂直方向），推荐 gap 替代 margin hack；详解 flex-basis 与 width 的优先级差异，以及 min-width: 0 对文本截断的必要性。
尺寸函数（Sizing Functions）：推广 clamp()、min()/max()、fit-content() 实现流体排版与自适应容器，减少对媒体查询的依赖。
现代选择器：:is() 与 :where() 降低选择器重复与特异性权重；:has() 实现父级选择；:focus-visible 区分键盘与鼠标焦点。
容器查询与响应式：原生 aspect-ratio 替代 padding 技巧；@container 实现组件级响应式，需配合 container-type 声明。
滚动与性能：scroll-behavior: smooth、overscroll-behavior: contain 及 scroll-snap-* 原生实现平滑滚动与轮播；contain、content-visibility 优化渲染性能。
无障碍与缩写：prefers-reduced-motion、prefers-color-scheme、forced-colors 支持用户偏好；inset、place-items、逻辑属性减少代码冗余。
显著优点
- 实战导向：每个知识点均附带具体代码示例，可直接应用于生产环境
- 现代特性覆盖：容器查询、
:has()、逻辑属性等 2022+ 标准特性 - 性能与可访问性并重：不仅关注视觉效果，强调渲染优化与无障碍支持
潜在缺点
- 浏览器兼容性：容器查询、
:has()、:focus-visible等特性需较新浏览器版本（Chrome 105+、Safari 15.4+） - 碎片化呈现：知识点按主题罗列，缺乏完整项目案例串联
- 未涉及 CSS 架构：无 BEM、OOCSS、Utility-first 等方法论指导
适合人群
- 具备基础 CSS 知识、希望突破瓶颈的中级前端开发者
- 需要快速查阅现代 CSS 特性用法的工程师
- 关注性能优化与无障碍访问的资深开发者
常规风险
- 渐进增强策略缺失：未标注各特性的 baseline 支持版本，直接复制可能引发生产环境兼容性问题
- 过度优化提示：
will-change、contain: strict等属性滥用可能导致内存开销或调试困难 - 无障碍合规性：
prefers-reduced-motion等媒体查询需配合实际动画降级实现，仅声明查询不足以保证合规