css-coder

用途：在编写、审查或重构 CSS 时提供指导，坚持 Web 标准、可访问性、性能与可维护性优先。核心原则：优先使用原生 CSS，未明确要求时不引入 Tailwind 或 CSS-in-JS；样式须支持辅助技术并尊重用户偏好；减少重绘、避免布局抖动、使用高效选择器；代码可读优先于取巧；用自定义属性替代魔法数字。工作流：先查阅 references/patterns.md 中的既有模式与片段，不确定时参考 MDN Web Docs 或 CSS 规范，也可在符合上述原则的前提下提出替代方案。编写要点：选择器优先用 class，保持低且可预测的特异性，嵌套控制在 2-3 层；用 -- 前缀自定义属性管理颜色、间距、排版并定义在 :root 或合适作用域；使用逻辑属性（如 margin-inline、padding-block、inset-inline-start、block-size）替代物理属性；排版与间距用 rem，组件相对尺寸可用 em，慎用视口单位并配合回退，字号避免 px；颜色函数使用现代空格分隔语法，推荐 oklch()，可用相对颜色语法派生悬停或透明变体；二维布局用 Grid，一维对齐用 Flexbox，布局不用浮动；媒体查询用现代范围语法，如 @media (width < 48rem)、@media (width >= 48rem)，采用 Shared First 而非移动优先，并尽量少设断点。可访问性：不得用 display: none 或 visibility: hidden 隐藏应保留给屏幕阅读器的内容，需尊重 prefers-reduced-motion、prefers-color-scheme、prefers-contrast，保证色彩对比度（至少 WCAG AA），保留可见焦点指示。性能：动画优先 transform 与 opacity，慎用 will-change，少用 * 选择器，大型代码库可用 @layer 管理层叠。限制：更多模式逐步补充，缺少所需模式时应提出与核心原则一致的建议；具体安装命令、收费与平台信息暂未提供。