开放 Props（以及自定义属性作为系统）

也许 CSS 自定义属性最基本和最明显的用途是设计令牌。颜色、字体、间距、时间以及您在设计网站时可以从中提取的其他设计原子位。如果您几乎只从设计令牌中提取值，那么您将走向干净的设计以及通常是网页设计目标的一致专业外观。事实上，我认为我写过正是这一点导致了实用程序类框架的流行。

我认为部分流行度是由于，如果您从这些预配置的类中进行选择，设计最终会相当不错。您无法偏离轨道。您从经过精心设计以使其看起来良好的有限值集中进行选择。

我正在说这个（使用定义这些类作为单一样式作业令牌的样式表）

<h1 class="color-primary size-large">Header<h1>

…与这个具有相似的价值主张

html {
  --color-primary: green;
  --size-large: 3rem;
  /* ... and a whole set of tokens */
}

h1 {
  color: var(--color-primary);
  font-size: var(--size-large);
}

两者都有零构建版本。例如，Tachyons 是一个现成的样式表，其中包含大量您只需使用的实用程序类，而 Windi 则是一个带有及时编译器等功能的完整高级工具。Pollen 是一个您只需使用的自定义属性库，而全新的 Open Props 则具有 及时编译器，仅提供使用的自定义属性。

好的，所以，Open Props！

整个内容实际上只是一堆您可以用来设计内容的 CSS 自定义属性。它就像您样式的庞大起点。它表示“将所有内容都设为自定义属性”，但以我们已经习惯的设计令牌的方式，其中它们是有限的预定数量的选择。

类比对人们来说很清晰

Open Props：由令人惊叹的 @argyleink 创建的一个新的 CSS 库。

它是使用 CSS 变量的 Tailwind。https://#/21pxE2bjW7

— David East (@_davideast) 2021年12月1日

我猜吸引人们使用它的原因是其美丽的默认值。

30 种精美的定制渐变，使用方式简单，例如 `var(–gradient-1)`https://#/LISp4eoeS1 pic.twitter.com/d7Tr113nRI

— Adam Argyle (@argyleink) 2021年12月1日

它不做的是阻止您必须命名事物，我知道实用程序类爱好者非常喜欢这一点。在这里，您需要继续使用普通的 CSS 选择器（如命名类）来选择事物并像“正常”一样对其进行样式设置。但是，您不是手工制作自己的值，而是从这些自定义属性中提取值。

整个基础内容（您可以在此处查看源代码）在网络上占用 4.4kb（无论如何，这是我的 DevTools 显示的内容）。这并不包括您编写的用于使用自定义属性的 CSS，但它是一个非常小的开销。有一些额外的 PropPack 会增加大小（但它们也非常小），如果您担心大小，这就是整个及时编译器的用途。您可以在StackBlitz 上试用它。

对我来说似乎非常棒！我会使用它。我喜欢它最终只是普通的 CSS，因此没有任何您无法做的事情。随着 CSS 的发展，您将保持良好的状态。