开放道具（将自定义属性作为系统）

CSS自定义属性为设计令牌提供了一种直接的方法：可重复使用的单元，例如颜色，字体，间距和时机。主要依靠这些代币会促进清洁，一致的设计，这是网络开发的关键目标。这种方法反映了公用事业级框架的吸引力：

公用事业级框架的受欢迎程度源于其预先配置的课程，从而导致了美学上令人愉悦的设计。有限的价值选择可确保一致，专业的外观。

考虑以下示例：使用预定义的类：

<h1 id="标题">标题</h1>

...与使用CSS自定义属性相媲美：

html {
   - 彩色主要：绿色；
   - 大型：3REM；
  / * ...更多令牌 */
}

H1 {
  颜色：var（ - 颜色 - 主要）;
  字体大小：var（ - 尺寸 - 巨大）;
}

两者都提供零构建选项。像Tachyons这样的框架提供现成的公用事业类，而Windi则采用了恰当的编译器。同样，花粉提供了预先建造的自定义属性库，而创新的开放道具则使用正式的编译器，仅包括二手属性。

引入开放道具：

开放道具本质上是CSS自定义属性的全面集合，是造型的强大基础。它强调了一种“自定义属性优先”方法，以一组选择义的选项反映了设计令牌的既定实践。

相似之处很清楚：

Open Props的有吸引力的默认值可能是其主要吸引力。

但是，开放道具并不能消除对命名元素的需求；您仍然将标准CSS选择器（类似于命名类）用于目标和样式元素。关键区别是利用预定的自定义属性，而不是手动创建值。

核心开放道具库（可用来源）仅为4.4kb（基于DevTools的测量值）。这不包括您的自定义CSS，代表最小的开销。虽然额外的主题包增加了尺寸，但它们仍然很小，而恰到时光的编译则解决了尺寸的问题。您可以在Stackblitz上尝试一下。

开放道具提供了令人信服的解决方案。它对标准CSS的依赖确保了未来的兼容性和灵活性。

以上是开放道具（将自定义属性作为系统）的详细内容。更多信息请关注PHP中文网其他相关文章！