使用自定義屬性'堆棧”來馴服級聯

CSS自定義屬性：掌控級聯和繼承的新方法

自1994年CSS誕生以來，級聯和繼承就定義了我們在網頁上的設計方式。兩者都是強大的功能，但是作為開發者，我們對它們如何交互的控制力非常有限。選擇器特異性和源代碼順序提供了一些最小的“分層”控制，但缺乏細微差別——並且繼承需要一個unbroken lineage 。現在，CSS自定義屬性允許我們以新的方式管理和控制級聯和繼承。

本文將展示如何使用自定義屬性“堆棧”來解決級聯中的一些常見問題：從作用域組件樣式到更明確的意圖分層。

快速了解自定義屬性

瀏覽器使用供應商前綴（如-webkit- 或-moz-）定義新屬性的方式相同，我們可以使用“空” -- 前綴定義自己的自定義屬性。像Sass或JavaScript中的變量一樣，我們可以使用它們來命名、存儲和檢索值——但是像CSS中的其他屬性一樣，它們會隨著DOM級聯和繼承。

 <code>/* 定义自定义属性*/ html { --brand-color: rebeccapurple; }</code>

為了訪問這些捕獲的值，我們使用var() 函數。它有兩個部分：首先是自定義屬性的名稱，然後是該屬性未定義時的後備值：

 <code>button { /* 如果可用，则使用--brand-color，否则回退到deeppink */ background: var(--brand-color, deeppink); }</code>

這不是舊瀏覽器的支持回退。如果瀏覽器不理解自定義屬性，它將忽略整個var() 聲明。相反，這是一種處理未定義變量的內置方法，類似於字體堆棧在字體不可用時定義後備字體系列。如果我們不提供後備值，則默認為未設置。

構建變量“堆棧”

這種定義後備值的能力類似於在font-family 屬性中使用的“字體堆棧”。如果第一個系列不可用，則將使用第二個系列，依此類推。 var() 函數只接受單個後備值，但我們可以嵌套var() 函數來創建任意大小的自定義屬性後備“堆棧”：

 <code>button { /* 尝试Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 尝试--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

如果用於堆疊屬性的嵌套語法看起來很笨重，可以使用Sass 等預處理器使其更緊湊。

需要單個後備值限制才能支持包含逗號的後備值——例如字體堆棧或分層背景圖像：

 <code>html { /* 后备值为"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

定義“作用域”

CSS 選擇器允許我們深入到HTML DOM 樹中，並設置頁面上任何位置的元素或特定嵌套上下文中的元素的樣式。

 <code>/* 所有链接*/ a { color: slateblue; } /* section 内的链接*/ section a { color: rebeccapurple; } /* article 内的链接*/ article a { color: deeppink; }</code>

這很有用，但它並沒有捕捉“模塊化”面向對像或組件驅動樣式的現實。我們可能有許多article 和aside，以各種配置嵌套。我們需要一種方法來闡明在它們重疊時哪個上下文或作用域應該優先。

鄰近作用域

假設我們有一個.light 主題和一個.dark 主題。我們可以在根元素上使用這些類來定義頁面範圍的默認值，但我們也可以將它們應用於以各種方式嵌套的特定組件：

每次我們應用顏色模式類之一時，背景和顏色屬性都會被重置，然後由嵌套的標題和段落繼承。在我們的主上下文中，顏色繼承自.light 類，而嵌套的標題和段落繼承自.dark 類。繼承基於直接血統，因此具有定義值的最近祖先將優先。我們稱之為鄰近性。

鄰近性對繼承很重要，但它對選擇器沒有影響，選擇器依賴於特異性。如果我們想設置內部暗色或淺色容器中的某些內容的樣式，這就會成為一個問題。

在這裡，我嘗試定義淺色和深色按鈕變體。淺色模式按鈕應為rebeccapurple，帶有白色文本，以便它們脫穎而出，而深色模式按鈕應為plum，帶有黑色文本。我們根據淺色和深色上下文直接選擇按鈕，但這不起作用：

一些按鈕同時處於兩種上下文中，具有.light 和.dark 祖先。在這種情況下，我們想要的是讓最近的主題接管（繼承鄰近性行為），但我們得到的卻是第二個選擇器覆蓋第一個選擇器（級聯行為）。由於這兩個選擇器具有相同特異性，因此源代碼順序決定了獲勝者。

自定義屬性和鄰近性

我們需要一種方法來從主題繼承這些屬性，但只將它們應用於特定的子元素，例如我們的按鈕。自定義屬性使這成為可能！我們可以在淺色和深色容器上定義值，而只在嵌套元素（如我們的按鈕）上使用它們的繼承值。

我們將首先設置按鈕以使用自定義屬性，並使用後備“默認”值，以防這些屬性未定義：

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

現在我們可以根據上下文設置這些值，它們將根據鄰近性和繼承作用域到相應的祖先：

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

作為額外獎勵，我們總體上使用了更少的代碼，以及一個統一的按鈕定義：

我認為這是為按鈕組件創建可用參數的API。 Sara Soueidan 和Lea Verou 都在最近的文章中很好地介紹了這一點。

組件所有權

有時鄰近性不足以定義作用域。當JavaScript 框架生成“作用域樣式”時，它們正在建立特定的對像元素所有權。 “選項卡佈局”組件擁有選項卡本身，但不擁有每個選項卡後面的內容。這也是BEM 約定試圖在復雜的.block__element 類名中捕捉的內容。

Nicole Sullivan 在2011 年創造了“甜甜圈作用域”一詞來討論這個問題。雖然我相信她對這個問題有更新的想法，但根本問題並沒有改變。選擇器和特異性非常適合描述我們如何在廣泛模式之上構建詳細樣式的方式，但它們並沒有傳達清晰的所有權感。

我們可以使用自定義屬性堆棧來幫助解決這個問題。我們將首先在元素上創建“全局”屬性，這些屬性用於我們的默認顏色：

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

現在，我們可以在任何想要引用它的位置使用它。我們將使用data-theme 屬性來應用我們的前景和背景顏色。我們希望全局值提供默認後備值，但我們也希望可以選擇使用特定主題覆蓋它。這就是“堆棧”的用武之地：

 <code>[data-theme] { /* 如果没有组件值，则使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

現在我們可以通過將*--component 屬性設置為全局屬性的反向來定義反向組件：

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

但我們不希望這些設置繼承到所有權甜甜圈之外，因此我們在每個主題上將這些值重置為initial（未定義）。我們需要以較低特異性或較早的源代碼順序執行此操作，以便它提供每個主題都可以覆蓋的默認值：

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

initial 關鍵字在用於自定義屬性時具有特殊含義，將其恢復為Guaranteed-Invalid 狀態。這意味著它不會傳遞給set background: initial 或color: initial，自定義屬性將變為未定義，我們將回退到堆棧中的下一個值，即全局設置。

我們可以對按鈕執行相同的操作，然後確保將data-theme 應用於每個組件。如果沒有給出特定主題，則每個組件都將默認為全局主題：

定義“來源”

CSS 級聯是一系列過濾層，用於確定在同一屬性上定義多個值時哪個值應該優先。我們最常與特異性層交互，或者基於源代碼順序的最終分層——但級聯的第一層是樣式的“來源”。來源描述了樣式的來源——通常是瀏覽器（默認值）、用戶（首選項）或作者（我們）。

默認情況下，作者樣式會覆蓋用戶首選項，用戶首選項會覆蓋瀏覽器默認值。當任何人將!important應用於樣式時，這就會發生變化，並且來源會反轉：瀏覽器!important樣式具有最高的來源，然後是重要的用戶首選項，然後是我們的作者重要樣式，高於所有普通層。還有一些其他的來源，但我們在這裡不再贅述。

當我們創建自定義屬性“堆棧”時，我們正在構建非常類似的行為。如果我們想將現有來源表示為自定義屬性堆棧，它看起來會像這樣：

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

這些層已經存在，因此沒有理由重新創建它們。但是當我們在上面分層我們的“全局”和“組件”樣式時，我們正在做類似的事情——創建一個“組件”來源層，它會覆蓋我們的“全局”層。同樣的方法可以用來解決CSS中各種分層問題，這些問題不能總是用特異性來描述：

• 覆蓋» 組件» 主題» 默認值
• 主題» 設計系統或框架
• 狀態» 類型» 默認值

讓我們再看看一些按鈕。我們需要一個默認按鈕樣式、一個禁用狀態和各種按鈕“類型”，例如danger、primary 和secondary。我們希望禁用狀態始終覆蓋類型變體，但選擇器無法捕捉這種區別：

但是我們可以定義一個堆棧，以我們想要優先的順序提供“類型”和“狀態”層：

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

現在，當我們設置兩個變量時，狀態將始終優先：

我已經使用這種技術創建了一個級聯顏色框架，該框架允許基於分層進行自定義主題設置：

• HTML 中預定義的主題屬性
• 用戶顏色偏好
• 淺色和深色模式
• 全局主題默認值

混合搭配

這些方法可以達到極致，但是大多數日常用例可以使用堆棧中的兩三個值來處理，通常結合使用上述技術：

• 定義層的變量堆棧
• 繼承根據鄰近性和作用域設置它們
• 仔細應用initial 值以從作用域中刪除嵌套元素

我們在OddBird 的項目中一直在使用這些自定義屬性“堆棧”。我們仍在不斷探索，但它們已經幫助我們解決了僅使用選擇器和特異性難以解決的問題。使用自定義屬性，我們不必與級聯或繼承作鬥爭。我們可以按預期捕獲和利用它們，並更好地控制它們在每個實例中的應用方式。對我來說，這對CSS 來說是一個巨大的勝利——尤其是在開發樣式框架、工具和系統時。

以上是使用自定義屬性'堆棧”來馴服級聯的詳細內容。更多資訊請關注PHP中文網其他相關文章！