CSS自定義屬性：掌控級聯(lián)和繼承的新方法

自1994年CSS誕生以來，級聯(lián)和繼承就定義了我們在網(wǎng)頁上的設(shè)計方式。兩者都是強大的功能，但是作為開發(fā)者，我們對它們?nèi)绾谓换サ目刂屏Ψ浅Ｓ邢?。選擇器特異性和源代碼順序提供了一些最小的“分層”控制，但缺乏細微差別——并且繼承需要一個 unbroken lineage。現(xiàn)在，CSS自定義屬性允許我們以新的方式管理和控制級聯(lián)和繼承。

本文將展示如何使用自定義屬性“堆?！眮斫鉀Q級聯(lián)中的一些常見問題：從作用域組件樣式到更明確的意圖分層。

快速了解自定義屬性

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

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

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

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

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

構(gòu)建變量“堆?！?/h3>

這種定義后備值的能力類似于在 font-family 屬性中使用的“字體堆?！薄Ｈ绻谝粋€系列不可用，則將使用第二個系列，依此類推。var() 函數(shù)只接受單個后備值，但我們可以嵌套 var() 函數(shù)來創(chuàng)建任意大小的自定義屬性后備“堆?！保?/p>

<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 等預(yù)處理器使其更緊湊。

需要單個后備值限制才能支持包含逗號的后備值——例如字體堆?；蚍謱颖尘皥D像：

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

定義“作用域”

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

<code>/* 所有鏈接 */
a { color: slateblue; }

/* section 內(nèi)的鏈接 */
section a { color: rebeccapurple; }

/* article 內(nèi)的鏈接 */
article a { color: deeppink; }</code>

這很有用，但它并沒有捕捉“模塊化”面向?qū)ο蠡蚪M件驅(qū)動樣式的現(xiàn)實。我們可能有許多 article 和 aside，以各種配置嵌套。我們需要一種方法來闡明在它們重疊時哪個上下文或作用域應(yīng)該優(yōu)先。

鄰近作用域

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

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

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

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

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

自定義屬性和鄰近性

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

我們將首先設(shè)置按鈕以使用自定義屬性，并使用后備“默認”值，以防這些屬性未定義：

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

現(xiàn)在我們可以根據(jù)上下文設(shè)置這些值，它們將根據(jù)鄰近性和繼承作用域到相應(yīng)的祖先：

<code>.dark {
  --btn-color: plum;
  --btn-contrast: black;
}

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

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

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

組件所有權(quán)

有時鄰近性不足以定義作用域。當(dāng) JavaScript 框架生成“作用域樣式”時，它們正在建立特定的對象元素所有權(quán)。“選項卡布局”組件擁有選項卡本身，但不擁有每個選項卡后面的內(nèi)容。這也是 BEM 約定試圖在復(fù)雜的 .block__element 類名中捕捉的內(nèi)容。

Nicole Sullivan 在 2011 年創(chuàng)造了“甜甜圈作用域”一詞來討論這個問題。雖然我相信她對這個問題有更新的想法，但根本問題并沒有改變。選擇器和特異性非常適合描述我們?nèi)绾卧趶V泛模式之上構(gòu)建詳細樣式的方式，但它們并沒有傳達清晰的所有權(quán)感。

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

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

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

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

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

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

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

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

initial 關(guān)鍵字在用于自定義屬性時具有特殊含義，將其恢復(fù)為 Guaranteed-Invalid 狀態(tài)。這意味著它不會傳遞給 set background: initial 或 color: initial，自定義屬性將變?yōu)槲炊x，我們將回退到堆棧中的下一個值，即全局設(shè)置。

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

定義“來源”

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

默認情況下，作者樣式會覆蓋用戶首選項，用戶首選項會覆蓋瀏覽器默認值。當(dāng)任何人將!important應(yīng)用于樣式時，這就會發(fā)生變化，并且來源會反轉(zhuǎn)：瀏覽器!important樣式具有最高的來源，然后是重要的用戶首選項，然后是我們的作者重要樣式，高于所有普通層。還有一些其他的來源，但我們在這里不再贅述。

當(dāng)我們創(chuàng)建自定義屬性“堆?！睍r，我們正在構(gòu)建非常類似的行為。如果我們想將現(xiàn)有來源表示為自定義屬性堆棧，它看起來會像這樣：

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

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

• 覆蓋 ? 組件 ? 主題 ? 默認值
• 主題 ? 設(shè)計系統(tǒng)或框架
• 狀態(tài) ? 類型 ? 默認值

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

但是我們可以定義一個堆棧，以我們想要優(yōu)先的順序提供“類型”和“狀態(tài)”層：

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

現(xiàn)在，當(dāng)我們設(shè)置兩個變量時，狀態(tài)將始終優(yōu)先：

我已經(jīng)使用這種技術(shù)創(chuàng)建了一個級聯(lián)顏色框架，該框架允許基于分層進行自定義主題設(shè)置：

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

混合搭配

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

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

我們在 OddBird 的項目中一直在使用這些自定義屬性“堆?！?。我們?nèi)栽诓粩嗵剿?，但它們已?jīng)幫助我們解決了僅使用選擇器和特異性難以解決的問題。使用自定義屬性，我們不必與級聯(lián)或繼承作斗爭。我們可以按預(yù)期捕獲和利用它們，并更好地控制它們在每個實例中的應(yīng)用方式。對我來說，這對 CSS 來說是一個巨大的勝利——尤其是在開發(fā)樣式框架、工具和系統(tǒng)時。

以上是使用自定義屬性'堆棧”來馴服級聯(lián)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！