现代 CSS 实战手册

解决什么问题

写 CSS 时最让人头疼的往往不是「不会写」，而是那些反直觉的行为：明明给子元素设了 z-index: 9999，却被某个父级的堆叠上下文困住；flex: 1 并不等同于 width: 50%，因为 flex-basis 默认是 0% 而非 auto；fr 单位在没有 minmax() 兜底时可能被 min-content 顶得面目全非；gap 出现之前，我们用了多少 margin hack 来模拟间距。更别提移动端首行布局抖动、滚动链在 iOS 上一路穿透到 body、以及 overflow: hidden 意外破坏 flex 容器尺寸这类老坑。

这个技能的价值在于把这些隐性知识显性化：它不生成炫酷框架，而是帮你在写代码时避开常见陷阱，并提供可解释的判断依据。

它如何工作

核心能力围绕四大能力展开，整体由 SKILL.md 驱动 Agent 执行，关键路径如下：

• 布局与堆叠上下文：解释 isolation: isolate 如何收敛 z-index 污染、opacity < 1、transform 与 filter 为何会各自创建新的堆叠上下文，以及 flex/grid 子元素的外边距为何不会折叠。
• 现代特性优先：鼓励使用 clamp()、min()/max()、inset、place-items、逻辑属性（margin-inline）、容器查询（@container）、:is()、:where() 与 :has() 等已被广泛支持的原生能力——基于「现代特性的浏览器支持往往比你想象的更好」这一判断。
• 响应式与性能：始终从移动端起步的 min-width 媒体查询策略、contain: layout 隔离重排、content-visibility: auto 跳过屏幕外渲染，以及用 scroll-snap-*、scrollbar-gutter: stable 实现无 JS 的原生滚动体验。
• 可访问性基线：强制检查 prefers-reduced-motion、prefers-color-scheme、:focus-visible，确保键盘焦点可见，不单纯依赖颜色传达状态。

内容按 Quick Reference 拆分为 layout.md、responsive.md、selectors.md、performance.md 四个参考文件，便于按需加载。使用时建议先确认运行环境符合依赖说明，再对照适用场景选择用法，最后执行并校验输出。

适用边界

• 只处理与 CSS 相关的内容，超出范围的需求需人工判断或拆分后重试；复杂设计决策仍需工程师确认。
• 输入内容须符合 Markdown 格式，效果依赖底层 LLM 能力；部分方案涉及实验性特性，需先对照浏览器支持表。
• 理论上仅提供 CSS 能力范围内的建议与处理结果，无法替代实际跨设备调试。