CSS Reference 和 MDN 等 CSS 文档有什么区别?
CSS Reference 和 MDN 不是替代关系，而是两种查阅方式：想快速看懂某个属性“长什么样、起什么作用”，用 CSS Reference；想确认完整语法、浏览器兼容性或冷门特性，用 MDN。两者按目的切换即可。
核心定位差异
| 维度 | CSS Reference | MDN 等规范型文档 |
|---|---|---|
| 主要形式 | 可视化、带动画示例 | 文字说明 + 语法 + 兼容性表 |
| 覆盖范围 | 常用属性，不追求收录全部 | 力求覆盖全部 CSS 特性 |
| 上手速度 | 打开即见效果，适合建立直觉 | 需要阅读，信息更完整 |
| 适合场景 | 快速理解属性作用、复习常用属性 | 查语法细节、兼容性、边缘情况 |
CSS Reference 对自己的定位是“A free visual guide to CSS”，用插图和动画示例解释最流行的属性。这意味着它的强项是“看见效果”，而不是“穷尽规范”。
CSS Reference 适合什么情况
- 第一次接触某个属性，想先知道它大概控制什么。
- 已经知道属性名，但记不清视觉表现，想快速确认。
- 复习 Flexbox、Grid、定位、过渡、动画这类布局与动效属性。
它的内容按集合组织，从页面可见的分类包括：
- Animations：animation-delay、animation-direction、animation-duration 等
- Backgrounds：background-color、background-image、background-size 等
- Box model：margin、padding、border、width、height 等
- Flexbox：align-items、justify-content、flex-grow、flex-wrap 等
- CSS Grid：grid-template-columns、grid-area、grid-gap 等
- Positioning：position、top、left 等
- Transitions、Typography 等
每个属性都归入对应集合，方便顺着一个主题连续看下去。
MDN 等文档适合什么情况
- 需要确认属性的完整取值、默认值和简写展开规则。
- 要查浏览器兼容性，判断某个写法能不能在目标环境用。
- 处理冷门属性、实验性特性或规范层面的细节。
- 需要看正式语法定义，而不只是效果演示。
这些正是可视化指南通常不深入的部分。CSS Reference 明确聚焦“最流行的属性”，所以遇到不常见特性时，转向 MDN 更稳妥。
怎么配合使用
一个实用的顺序是：
- 在 CSS Reference 找到属性，先看示例建立直观印象。
- 回到 MDN 核对语法、取值和兼容性。
- 写代码时以 MDN 的规范描述为准，用 CSS Reference 辅助回忆效果。
例如需要给卡片做悬停过渡，可以先用 CSS Reference 的 Transitions 集合理解 transition 各子属性分别控制什么，再去 MDN 确认简写写法和浏览器支持，最后落到项目里。
选择建议
- 目标是“看懂效果、快速复习”：优先 CSS Reference。
- 目标是“查全、查准、查兼容”：优先 MDN。
- 不确定用哪个：先 CSS Reference 建立直觉，再 MDN 补细节，两者互补而非二选一。