本文探討如何利用CSS級(jí)聯(lián)層提升組件的可定制性、效率以及易用性和易理解性。

我熱衷于代碼組織，發(fā)現(xiàn)級(jí)聯(lián)層是明確組織代碼的絕佳方式，因?yàn)樗苯幼裱?jí)聯(lián)的讀取順序。更妙的是，除了幫助進(jìn)行“頂級(jí)”組織外，級(jí)聯(lián)層還可以嵌套，允許我們根據(jù)級(jí)聯(lián)編寫更精確的樣式。

唯一的缺點(diǎn)是你的想象力——沒有什么能阻止我們過度設(shè)計(jì)CSS。需要明確的是，你很可能會(huì)認(rèn)為我即將展示的內(nèi)容是一種過度設(shè)計(jì)。但我認(rèn)為我已經(jīng)找到了平衡點(diǎn)，保持簡(jiǎn)單而有序，并樂于分享我的發(fā)現(xiàn)。

CSS組件模式的構(gòu)成

讓我們以按鈕為例，探討使用CSS編寫組件的模式。按鈕是幾乎每個(gè)組件庫中最流行的組件之一。這種流行是有原因的，因?yàn)榘粹o可用于各種用例，包括：

• 執(zhí)行操作，例如打開抽屜，
• 導(dǎo)航到UI的不同部分，以及
• 保持某種狀態(tài)，例如焦點(diǎn)或懸停。

而且按鈕有多種不同的標(biāo)記形式，例如<button></button>、input[type="button"]和<a></a>。如果你相信的話，制作按鈕的方法甚至更多。

最重要的是，不同的按鈕執(zhí)行不同的功能，并且通常會(huì)相應(yīng)地進(jìn)行樣式設(shè)置，以便一種操作的按鈕與另一種操作的按鈕區(qū)分開來。按鈕還會(huì)響應(yīng)狀態(tài)更改，例如當(dāng)它們懸停、活動(dòng)和聚焦時(shí)。如果你曾經(jīng)使用BEM語法編寫過CSS，我們可以在級(jí)聯(lián)層的上下文中沿類似的思路思考。

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

好的，現(xiàn)在讓我們編寫一些代碼。具體來說，讓我們創(chuàng)建幾種不同類型的按鈕。我們將從一個(gè).button類開始，我們可以將其設(shè)置為任何我們想要設(shè)置為按鈕的元素！我們已經(jīng)知道按鈕有多種不同的標(biāo)記形式，因此通用的.button類是選擇一個(gè)或所有這些按鈕最可重用和最可擴(kuò)展的方式。

<code>.button {
  /* 所有按鈕的通用樣式 */
}</code>

使用級(jí)聯(lián)層

在這里，我們可以插入我們的第一個(gè)級(jí)聯(lián)層！記住，我們首先想要級(jí)聯(lián)層的原因是它允許我們?cè)谠u(píng)估樣式時(shí)設(shè)置CSS級(jí)聯(lián)的讀取順序。我們可以告訴CSS先評(píng)估一層，然后是另一層，然后再是另一層——所有這些都按照我們想要的順序進(jìn)行。這是一個(gè)令人難以置信的功能，它賦予我們超級(jí)能力來控制瀏覽器應(yīng)用哪些樣式“勝出”。

我們將此層命名為components，因?yàn)榘粹o是一種組件。我喜歡這個(gè)名稱的原因是它足夠通用，可以支持我們將來在決定擴(kuò)展設(shè)計(jì)系統(tǒng)時(shí)添加的其他組件。它隨著我們一起擴(kuò)展，同時(shí)保持與我們將來編寫的可能不是特定于組件的其他樣式的良好關(guān)注點(diǎn)分離。

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

嵌套級(jí)聯(lián)層

事情變得有點(diǎn)奇怪的地方在這里。你知道你可以在類內(nèi)部嵌套級(jí)聯(lián)層嗎？這完全是一件事。所以，看看這個(gè)，我們可以在已經(jīng)位于其自身層內(nèi)的.button類內(nèi)部引入一個(gè)新的層。這就是我的意思：

<code>.button {
  /* 所有按鈕的通用樣式 */
}</code>

最終，瀏覽器就是這樣解釋層內(nèi)層的：

<code>/* 組件頂級(jí)層 */
@layer components {
  .button {
    /* 所有按鈕的通用樣式 */
  }
}</code>

這篇文章不僅僅是關(guān)于嵌套樣式的，所以我只想說，當(dāng)你這樣做時(shí)，你的里程可能會(huì)有所不同。查看Andy Bell最近關(guān)于謹(jǐn)慎使用嵌套樣式的文章。

樣式結(jié)構(gòu)

到目前為止，我們已經(jīng)在一個(gè)級(jí)聯(lián)層內(nèi)建立了一個(gè).button類，該層旨在容納我們?cè)O(shè)計(jì)系統(tǒng)中的任何類型的組件。在該.button內(nèi)部是另一個(gè)級(jí)聯(lián)層，這一層用于選擇我們可能在標(biāo)記中遇到的不同類型的按鈕。我們之前討論過按鈕是<button></button>、<input>或<a></a>，這就是我們?nèi)绾螁为?dú)選擇樣式化每種類型的方法。

我們可以使用:is()偽選擇器函數(shù)，這類似于說：“如果這個(gè).button是一個(gè)<a></a>元素，則應(yīng)用這些樣式。”

<code>/* 組件頂級(jí)層 */
@layer components {

  .button {
    /* 組件元素層 */
    @layer elements {
      /* 樣式 */
    }
  }
}</code>

定義默認(rèn)按鈕樣式

我將用適用于所有按鈕的通用樣式填充我們的代碼。這些樣式位于元素層的頂部，因此無論標(biāo)記如何，它們都將應(yīng)用于任何和所有按鈕?？梢詫⑺鼈円暈槟J(rèn)按鈕樣式。

<code>@layer components {
  @layer elements {
    .button {
      /* 按鈕樣式... */
    }
  }
}</code>

定義按鈕狀態(tài)樣式

當(dāng)用戶與默認(rèn)按鈕交互時(shí)，它們應(yīng)該做什么？這些是按鈕在用戶與之交互時(shí)可能采用的不同狀態(tài)，我們需要相應(yīng)地設(shè)置它們的樣式。

我將在元素子層正下方創(chuàng)建一個(gè)新的級(jí)聯(lián)子層，創(chuàng)造性地稱為“states”（狀態(tài)）：

<code>/* 組件頂級(jí)層 */
@layer components {
  .button {
    /* 組件元素層 */
    @layer elements {
      /* 所有按鈕的通用樣式 */

      &:is(a) {
        /* <a>特定樣式 */
      }

      &:is(button) {
        /* <button>特定樣式 */
      }

      /* etc. */
    }
  }
}</button></a></code>

在這里暫停并思考一下。我們應(yīng)該針對(duì)哪些狀態(tài)？我們想為這些狀態(tài)中的每一個(gè)更改什么？

某些狀態(tài)可能共享相似的屬性更改，例如:hover和:focus具有相同的背景顏色。幸運(yùn)的是，CSS 為我們提供了解決此類問題的工具，使用:where()函數(shù)根據(jù)狀態(tài)對(duì)屬性更改進(jìn)行分組。為什么使用:where()而不是:is()？:where()具有零特異性，這意味著它比:is()更容易覆蓋，:is()采用其參數(shù)中特異性得分最高的元素的特異性。在編寫可擴(kuò)展、可維護(hù)的CSS時(shí)，保持低特異性是一種美德。

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

但是我們?nèi)绾我?em>有意義的方式更新按鈕的樣式呢？我的意思是，我們?nèi)绾未_保按鈕看起來像懸?；蚓劢梗课覀冎恍柙谄渖咸砑右粋€(gè)新的背景顏色，但理想情況下，顏色應(yīng)該與元素層中設(shè)置的background-color相關(guān)。

因此，讓我們稍微重構(gòu)一下。之前，我將.button元素的background-color設(shè)置為darkslateblue。我想重用該顏色，因此最好將其轉(zhuǎn)換為CSS變量，以便我們可以一次更新它并使其應(yīng)用于所有地方。依賴變量是編寫可擴(kuò)展和可維護(hù)CSS的另一個(gè)優(yōu)點(diǎn)。

我將創(chuàng)建一個(gè)名為--button-background-color的新變量，它最初設(shè)置為darkslateblue，然后將其設(shè)置為默認(rèn)按鈕樣式：

<code>.button {
  /* 所有按鈕的通用樣式 */
}</code>

現(xiàn)在我們已經(jīng)將顏色存儲(chǔ)在變量中，我們可以在其他層中將相同的變量設(shè)置為按鈕的懸停和焦點(diǎn)狀態(tài)，使用相對(duì)較新的color-mix()函數(shù)將darkslateblue轉(zhuǎn)換為更淺的顏色，當(dāng)按鈕懸?；蚓劢箷r(shí)。

回到我們的狀態(tài)層！我們首先在一個(gè)名為--state-background-color的新CSS變量中混合顏色：

<code>/* 組件頂級(jí)層 */
@layer components {
  .button {
    /* 所有按鈕的通用樣式 */
  }
}</code>

然后，我們可以通過更新background-color屬性來應(yīng)用該顏色。

<code>/* 組件頂級(jí)層 */
@layer components {

  .button {
    /* 組件元素層 */
    @layer elements {
      /* 樣式 */
    }
  }
}</code>

定義修改后的按鈕樣式

除了元素和狀態(tài)層之外，你可能還在尋找組件中某種類型的變化，例如修飾符。這是因?yàn)椴⒎撬邪粹o都會(huì)像你的默認(rèn)按鈕一樣。你可能想要一個(gè)帶有綠色背景顏色的按鈕，供用戶確認(rèn)決策。或者你可能想要一個(gè)紅色的按鈕，在單擊時(shí)表示危險(xiǎn)。因此，我們可以采用現(xiàn)有的默認(rèn)按鈕樣式并為這些特定用例修改它們。

如果我們考慮級(jí)聯(lián)的順序——總是從上到下流動(dòng)——我們不希望修改后的樣式影響我們剛剛制作的狀態(tài)層中的樣式。因此，讓我們?cè)谠睾蜖顟B(tài)之間添加一個(gè)新的修飾符層：

<code>@layer components {
  @layer elements {
    .button {
      /* 按鈕樣式... */
    }
  }
}</code>

與我們處理狀態(tài)的方式類似，我們現(xiàn)在可以為每個(gè)按鈕修飾符更新--button-background-color變量。當(dāng)然，我們可以進(jìn)一步修改樣式，但我們保持相當(dāng)簡(jiǎn)單，以演示此系統(tǒng)的工作原理。

我們將創(chuàng)建一個(gè)新的類，該類將默認(rèn)按鈕的background-color從darkslateblue修改為darkgreen。同樣，我們可以依賴:is()選擇器，因?yàn)樵谶@種情況下我們需要增加的特異性。這樣，我們就可以用修飾符類覆蓋默認(rèn)按鈕樣式。我們將此類稱為.success（綠色是“成功”的顏色）并將其提供給:is()：

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

如果我們將.success類添加到我們的一個(gè)按鈕中，它將變成darkgreen而不是darkslateblue，這正是我們想要的。由于我們已經(jīng)在狀態(tài)層中進(jìn)行了一些color-mix()操作，因此我們將自動(dòng)繼承這些懸停和焦點(diǎn)樣式，這意味著在這些狀態(tài)下darkgreen會(huì)變淺。

<code>.button {
  /* 所有按鈕的通用樣式 */
}</code>

將所有內(nèi)容整合在一起

我們可以將需要修改的任何CSS屬性重構(gòu)為CSS自定義屬性，這為我們提供了很大的定制空間。

<code>/* 組件頂級(jí)層 */
@layer components {
  .button {
    /* 所有按鈕的通用樣式 */
  }
}</code>

附注：仔細(xì)查看該演示，并查看我是如何使用light-dark()調(diào)整按鈕背景的——然后閱讀Sara Joy的“來到light-dark()一邊”，以全面了解其工作原理！

你怎么看？你會(huì)用它來組織你的樣式嗎？對(duì)于一個(gè)組件很少的小項(xiàng)目來說，創(chuàng)建級(jí)聯(lián)層系統(tǒng)可能是過度的。但即使像我們剛才那樣稍微嘗試一下，也能說明我們?cè)诠芾怼踔榴Z服——CSS級(jí)聯(lián)方面擁有多大的能力。按鈕具有欺騙性地復(fù)雜，但我們看到了處理從默認(rèn)樣式到編寫其狀態(tài)和修改版本的樣式需要多少樣式。

以上是使用CSS級(jí)聯(lián)層組織設(shè)計(jì)系統(tǒng)組件圖案的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！