AI 摘要：本文由 CSS 社区知名开发者 Chris Coyier 撰写，分享了他首次整理并发布的 CSS Starter（非传统 Reset）。文章重点阐述其设计原则：为个人常用而作、注重简洁与可用性、优先逻辑属性 (logical properties)、避免自定义变量、利用 @layer 提升可维护性、兼顾可访问性与现代特性。整体风格更像是“理想的浏览器默认样式”，旨在作为灵活的基础而非强制的规范。

1. 基本原则 (Principles)
• 专为作者个人实践设计，但可供他人借鉴
• 区分 Reset 与 Starter，更偏向“添加优化”而非彻底清零
• 推崇逻辑属性 (logical properties)，避免过早定义 --custom-properties
• 强调 @layer 提升样式可控性
• 注重轻量、实用与“浏览器默认理想化”

2. 核心样式结构与实现 (Core CSS Structure)
• 基础元素：html { color-scheme: light dark; }，启用明暗模式支持
• 排版/字体：使用 clamp() 定义流体字体、tab-size: 2、hanging-punctuation 提升阅读体验
• 文本与标题：统一 box-sizing；标题自定义粗细/间距，正文 text-wrap: pretty + 限制宽度
• 链接样式：更轻盈的下划线处理、颜色基于 OKLCH
• 列表、表格：内嵌符号样式，表格结构更贴近现代 UI/UX 需求
• 媒体元素：默认不越界，figure/figcaption 做细微优化
• 表单/按钮：继承字体、宽度优化、符合无障碍 (a11y) 的交互与外观
• 隐藏与辅助样式：提供 .screenreader-only 与 :focus-visible 增强可访问性

3. 特别改进点 (Special Considerations)
• Dark Mode 支持：自动继承系统主题，滚动条/表单控件一致化
• 流体布局：clamp() 实现响应式字体与流式布局的平衡
• 可访问性增强：包含禁用态控制、无障碍隐藏、焦点可见性等最佳实践
• 平滑交互：兼容 prefers-reduced-motion，支持现代 CSS 的视图过渡 (view-transition) 与 interpolate-size

4. 作者态度与开放性 (Author’s View & Flexibility)
• 本 Starter 并非框架，也非版本化发布，推荐“按需拷贝”
• 样式适度、务实，避免过度规范化
• 邀请社区反馈，鼓励批判与改进

Frontend Masters

The Coyier CSS Starter

I felt called out by Mike Mai’s You are not a CSS dev if you have not made a CSS reset.