good-css

优质 CSS

一条能自行适配的声明胜过一组断点，一个 CSS 特性胜过一段脚本。只有在没有 JavaScript 也能正常工作的基础上，且 JavaScript 能让结果更好时，才使用它。

每种技巧都是一组属性和值，因此可以在任何编写系统中使用。示例中的类名只是占位符。请按照项目现有的方式编写声明，无论是样式表、Tailwind 工具类还是 StyleX 对象。如果该系统没有对应声明的简写，就写完整形式，例如 Tailwind 任意属性，或项目 CSS 文件中的规则。不要用断点替换这种技巧。

适用于所有 CSS

这些规则无需查阅文件。

• 使用 inline 和 block 属性替代 left、right、top 和 bottom。Tailwind 也有这些属性，例如 mbs-、pe- 和 inset-bs-，因此绝不要写 mt-、pr- 或 top-。block 相关属性需要 Tailwind 4.2。低于此版本时，请将其写为任意属性，例如 [margin-block-start:theme(spacing.4)]。
• 使用 oklch() 编写颜色，灰色、白色或黑色的色相设为 none。使用 color-mix(in oklch, …) 派生悬停、着色或透明版本。
• 将随屏幕尺寸变化的尺寸放在一个 clamp() 标记中。
• 将每条 :hover 规则都放在 @media (hover: hover) and (pointer: fine) 内。
• 使用 :focus-visible 和 outline 设置焦点样式。绝不要写 outline: none。
• 为所有可按压的元素添加 :active 状态。
• 将会移动或缩放元素的过渡放在 @media (prefers-reduced-motion: no-preference) 内。明确指定属性名称，绝不要用 all，也绝不要使用 ease-in。
• 使用 overflow: clip 裁切溢出内容。只有脚本会滚动某个元素时才使用 hidden。

编写前先阅读对应条目

每个文件都包含条目，其中列有 CSS 及其规则。这些规则是 CSS 正常工作所需的条件，因此请全部保留。只阅读与你即将编写的内容对应的文件。一个组件可能对应两三个文件，而整个页面可能对应其中的大多数文件。

阅读	编写以下内容前
references/foundations.md	重置样式表或基础样式表、颜色 token 集、深色模式、字体或间距比例
references/layout.md	页面或区块容器，或任何居中的 max-width 包装器（无论内容是否延伸到边缘）、卡片网格、各部分需要对齐的卡片、侧边栏、放置在不同宽度插槽中的组件、重叠图层、可能溢出的居中内容
references/spacing-and-shape.md	区块之间的间距、上下堆叠的元素、推到行或列末端的单个项目、嵌套圆角
references/text-and-media.md	来自用户或 CMS 的文本或图像，例如姓名、标题、摘要、缩略图、头像和嵌入内容、标签旁的图标、看起来未居中的标签、列中的数字
references/interaction.md	按钮、链接、输入框或卡片的焦点、悬停和按压状态、小型点击目标、可点击卡片、表单验证、文本区域、根据其内容设置样式的父元素、模态框后锁定的页面滚动
references/motion.md	缓动和时长 token、驱动多个值的一次状态变化、悬停时变化的阴影、页面间过渡、活动标签下方的指示器
references/show-and-hide.md	对话框、弹出框、下拉菜单或手风琴
references/scroll-and-viewport.md	轮播、可能溢出的行、模态框主体、在页眉和页脚之间滚动的聊天列表或抽屉、粘性页眉下方的页内链接、桌面或手机上的应用外壳

特意省略的内容

绝不要在 * 上添加 text-box 修剪、text-rendering: optimizeLegibility，也不要添加将所有元素设为 display: contents 或放入同一个网格单元的重置规则。references/foundations.md 说明了原因。

浏览器支持

大多数条目都以 Support: 行结尾。本技能不设定最低浏览器版本。请结合项目支持的浏览器评估该行，并在你使用的功能不受其中某个浏览器支持时告知用户。

动效

是否应该添加动效、动效的设计或评审、弹簧效果、手势与拖拽，以及在真实手机上的检查，都属于 Emil Kowalski 的技能 animate、review-animations、improve-animations、find-animation-opportunities 和 mobile-native 的范畴。安装了这些技能时，请在处理相应任务时使用它们；如果其中某项技能与这里的取值不一致，请采用该技能的取值。未安装这些技能时，请按条目原样执行，除条目或任务要求之外，不要添加任何动效。