open props 是一套开源、语义化的 css 自定义属性集合，提供标准化变量如 --color-primary、--space-4 等，解决团队命名不统一、主题切换困难等问题；纯 css、零构建依赖，支持 cdn 或 npm 引入，适用于原型、文档站及设计系统底层。
Open Props 是什么，为什么值得用
Open Props 是一套开源的、语义化的 CSS 自定义属性集合，不是框架，不侵入 HTML 结构，只提供像 --color-primary、--space-4、--radius-md 这类标准化变量。它解决的实际问题是：避免团队里每个人自己定义 --blue-500 或 --spacing-lg，最后命名不统一、数值不一致、换主题困难。
它不依赖构建工具，纯 CSS，直接通过 @import 或 CDN 引入就能用，适合快速原型、文档站、小项目或作为设计系统底层变量层。
如何通过 CDN 快速引入 Open Props
最轻量的方式是直接在 中引入官方托管的 CSS 文件：
<link rel="stylesheet" href="https://unpkg.com/open-props@1.9.0/style.min.css">
注意三点：
- 版本号（如
@1.9.0）建议锁定，避免意外升级导致变量名或值变更 -
style.min.css包含全部变量（颜色、间距、圆角、阴影、字体等），体积约 8KB，gzip 后更小 - 不要混用多个版本，否则
--color-slate-7可能在 v1.8 和 v1.9 中指向不同色值
如果用构建工具（Vite/Webpack），也可以 npm 安装后 @import：
@import 'open-props/style';但需确保 PostCSS 或构建配置支持解析 node_modules 中的路径。
怎么在 CSS 或内联样式中使用这些变量
变量全部以 -- 开头，按语义分组，比如：
- 颜色：
--color-primary、--color-slate-7、--color-red-9 - 间距：
--space-2、--space-6 - 圆角：
--radius-sm、--radius-full - 字体大小：
--font-size-xs、--font-size-lg
用法和其他 CSS 变量完全一致：
.btn {<br> background: var(--color-blue-6);<br> padding: var(--space-3) var(--space-4);<br> border-radius: var(--radius-md);<br>}
关键提醒：
- Open Props 不提供默认主题切换逻辑，变亮/暗模式需你自己监听
prefers-color-scheme并覆盖变量值 - 所有变量都是“原始值”，比如
--space-4是1rem（即 16px），不是计算后结果，可直接参与 calc() - 如果你已有自己的
--color-brand，别直接覆盖 Open Props 的--color-primary，应复用它的命名体系保持一致性
常见错误和兼容性注意点
容易踩的坑：
- 在未引入 Open Props CSS 的情况下直接写
var(--color-primary)，浏览器会 fallback 到 inherit 或 initial，样式失效且无报错 - 把 Open Props 当作“组件库”用，试图写
<button class="btn"></button>期望自动生效 —— 它只提供变量，不提供预设 class - 使用旧版 Safari（padding: 0.5rem; padding: var(--space-2);
- 想改某个变量（如把
--color-red-9调深一点），直接在 :root 里重定义即可，但要注意作用域 —— Open Props 的变量声明在 :root，你的覆盖也必须在同等或更高优先级的 :root 块中
变量名和值在每个版本都可能微调，查最新映射关系务必看官网的 tokens.json 或 GitHub README 中的表格，别凭记忆硬写 --shadow-lg —— 它在 1.9.0 中实际叫 --shadow-3。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
