自定義屬性的一種使用方法是將其視為設計令牌：顏色、間距、字體等等。您可以在頁面根部設置它們，並在整個CSS 中使用它們。非常有用，並且在過去一百萬年裡，不僅是自定義屬性，而且是預處理器變量的經典用例。
另一種使用方法（可以與設計令牌方法結合使用）是更徹底地使用它們，用於任何給定元素上的每個主要獨特樣式選擇。
假設您有一個這樣的卡片（為了演示目的而簡化）：
<code>.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px; } .card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2); }</code>很好。
但是，當您不可避免地製作卡片的變體時，您需要自己覆蓋這些規則集。 CSS 自定義屬性方法可以是這樣的：
<code>.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius); } .card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border); }</code>目前來看，稍微冗長一些，但是看看當我們想要進行變體時會發生什麼：
<code>.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0; }</code>以下是三個顯而易見的優勢：
與其在頂部聲明自定義屬性，然後在下面使用它們，我可以用這種方式同時進行：
<code>.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px); } .card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2)); }</code>現在，如果像--card-background 這樣的屬性被設置了，它將覆蓋此處的回退值。我不完全喜歡這個，因為它意味著.card上方的元素可以覆蓋它。這可能是您想要的，但這與一開始在.card 級別聲明值並不完全相同。這裡沒有強烈的意見。
這裡的一個例子是您可能想要單獨控制填充。
<code>.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding); }</code>現在，如果我想要，變體可以只控制填充的一部分：
<code>.card-variation { --card-padding-inline: 3rem; }</code>但是您必須注意一個很大的問題。這意味著如果您在根部聲明所有這些，這將不起作用，因為這些嵌套屬性已經被解析了。但是，只要它首先在.card 上聲明，您在這裡就會沒事。
假設您想要對值的每個部分進行超級終極控制。例如：
<code>html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl)); }</code>這有點巧妙，但這可能太過分了。顏色幾乎肯定會在根部聲明並保持不變，因此這個很大的問題將使覆蓋低級子屬性成為不可能。此外，如果您有--color-1，您可能還有2-9（或更多），這很好，因為顏色系統比簡單的顏色部分的數學運算要精細得多。
毫無疑問，Tailwind 非常受歡迎。它使用原子方法，其中大量HTML 類分別控制一個屬性。我認為它受歡迎的部分原因是，如果您從這些預配置的類中進行選擇，那麼設計最終會相當不錯。您無法偏離正軌。您是從一系列經過設計以使其看起來不錯的有限值中進行選擇的。
我不會說基於自定義屬性的樣式方法完全相同。例如，您仍然需要考慮類名抽象，而不是直接將樣式應用於HTML 元素。但是，它可能會享有一些與Tailwind 和其他原子類方法相同的約束/限制。如果您只能從預定義的--spacing-x 值、--color-x 值和--font-x 值中進行選擇，您可能會實現比以往更具凝聚力的設計。
就我個人而言，我發現朝著更依賴自定義屬性的設計系統邁進感覺很好——如果沒有什麼比這更能使變體和覆蓋更易於管理了。
第三方設計系統如何將它們提供的功能作為……只是一組大型自定義屬性供您隨意使用？
第三方交付成果甚至不必像這樣包含所有內容。例如，Adam Argyle 的transition.style 提供了一個“Hackpack”，它僅僅是轉換動畫幫助器的自定義屬性。
我聽到的一個反對這種更全面的自定義屬性方法的論點是新手可理解性。如果您編寫了該系統，它可能對您來說非常有意義。但它是在CSS 之上的額外抽象。所有的人都共享CSS 知識，而定制系統知識僅由積極參與該系統的人員共享。
剛接觸大量使用自定義屬性的系統將會有一個非常陡峭的學習曲線。
以上是不同程度的自定義屬性使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
