開放道具（將自定義屬性作為系統）

CSS自定義屬性為設計令牌提供了一種直接的方法：可重複使用的單元，例如顏色，字體，間距和時機。主要依靠這些代幣會促進清潔，一致的設計，這是網絡開發的關鍵目標。這種方法反映了公用事業級框架的吸引力：

公用事業級框架的受歡迎程度源於其預先配置的課程，從而導致了美學上令人愉悅的設計。有限的價值選擇可確保一致，專業的外觀。

考慮以下示例：使用預定義的類：

<h1 id="標題">標題</h1>

...與使用CSS自定義屬性相媲美：

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

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

兩者都提供零構建選項。像Tachyons這樣的框架提供現成的公用事業類，而Windi則採用了恰當的編譯器。同樣，花粉提供了預先建造的自定義屬性庫，而創新的開放道具則使用正式的編譯器，僅包括二手屬性。

引入開放道具：

開放道具本質上是CSS自定義屬性的全面集合，是造型的強大基礎。它強調了一種“自定義屬性優先”方法，以一組選擇義的選項反映了設計令牌的既定實踐。

相似之處很清楚：

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

但是，開放道具並不能消除對命名元素的需求；您仍然將標準CSS選擇器（類似於命名類）用於目標和样式元素。關鍵區別是利用預定的自定義屬性，而不是手動創建值。

核心開放道具庫（可用來源）僅為4.4kb（基於DevTools的測量值）。這不包括您的自定義CSS，代表最小的開銷。雖然額外的主題包增加了尺寸，但它們仍然很小，而恰到時光的編譯則解決了尺寸的問題。您可以在Stackblitz上嘗試一下。

開放道具提供了令人信服的解決方案。它對標準CSS的依賴確保了未來的兼容性和靈活性。

以上是開放道具（將自定義屬性作為系統）的詳細內容。更多資訊請關注PHP中文網其他相關文章！