前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

CSS 的條件判斷語(yǔ)句 if()

上周，在西班牙拉科魯尼亞舉行的CSS WG面對(duì)面會(huì)議中，讓人特別激動(dòng)的一個(gè)決議是大家一致同意向 CSS 中添加內(nèi)聯(lián) if() 語(yǔ)法。??

實(shí)際上，一個(gè)功能在被接受之前經(jīng)常會(huì)遭到幾次拒絕，例如CSS嵌套、:has()、容器查詢等都是在多次被拒后的最終迭代版本。if()在 2018 年曾被拒絕，其語(yǔ)法與我提出的非常相似。不同的是，現(xiàn)在我們已經(jīng)有了樣式查詢功能，可以簡(jiǎn)單地使用相同的條件語(yǔ)法（結(jié)合Tab在@when提案中提出的media()和supports()）。

if() 的作用？會(huì)取代樣式查詢嗎？

相反地，if()提供了樣式查詢無(wú)法涵蓋的功能。如果您能夠使用樣式查詢來(lái)解決問(wèn)題，那絕對(duì)應(yīng)該優(yōu)先選擇樣式查詢——它們通常是更優(yōu)的解決方案。但是，有些情況下，樣式查詢無(wú)法滿足需求。

舉個(gè)例子，考慮一個(gè)名為--variant的自定義屬性:

圖片

它可能包括設(shè)置背景顏色、邊框顏色、文本顏色、圖標(biāo)等。然而，實(shí)際上它的確切值可能從未直接在任何地方被逐字使用，而是作為影響其他屬性值的設(shè)置參數(shù)。

樣式查詢讓我們成功了一半：

圖片

但是，樣式查詢僅適用于后代。我們不能這樣做：

圖片

通常，我們?cè)谠厣闲枰O(shè)置的聲明非常少，有時(shí)僅僅一個(gè)。但是，即使只有一個(gè)聲明，對(duì)于許多（或許是大部分）更高級(jí)的自定義屬性用例而言，仍顯得過(guò)多，使得使用自定義屬性顯得不太實(shí)用。因此，組件庫(kù)常常轉(zhuǎn)而使用表示性屬性，如pill、outline、size等。

雖然這些表示性屬性初看之下似乎很合適，甚至在開(kāi)發(fā)體驗(yàn)（DX）方面似乎更優(yōu)（使用的字符更少——至少比為每個(gè)元素設(shè)置單獨(dú)的變量要少），但它們存在一些可用性問(wèn)題：

靈活性降低

它們不能基于選擇器、媒體查詢等有條件地應(yīng)用。更改它們需要更多 JS。如果它們?cè)诹硪粋€(gè)組件中使用，那么您就是 SOL，而對(duì)于（可繼承的）自定義屬性，您可以在父組件上設(shè)置屬性，并且它將向下繼承。

冗長(zhǎng)

它們必須應(yīng)用于單個(gè)實(shí)例，并且不能被繼承。即使人們使用某種形式的模板化或組件化來(lái)減少重復(fù)，他們?cè)谑褂瞄_(kāi)發(fā)工具進(jìn)行調(diào)試時(shí)仍然必須仔細(xì)研究這些屬性。

缺乏一致性

由于幾乎每個(gè)成熟的組件都支持自定義屬性，因此用戶必須記住哪些樣式是通過(guò)屬性完成的，哪些樣式是通過(guò)自定義屬性完成的。這種區(qū)別通常是任意的，因?yàn)樗皇怯捎美?qū)動(dòng)的，而是由實(shí)施便利性驅(qū)動(dòng)的。

使用if()，上面的示例成為可能：

圖片

雖然這是主要用例，但事實(shí)證明，制作媒體查詢并支持 if() 條件語(yǔ)法的條件部分也非常容易。由于它是一個(gè)函數(shù)，因此它的參數(shù)（包括條件?。┛梢源鎯?chǔ)在其他自定義屬性中。這意味著您可以執(zhí)行以下操作：

圖片

然后定義如下值：

圖片

就像 JS 中的三元組一樣，對(duì)于只有一小部分值變化的情況，它也可能更符合人體工程學(xué)：

圖片

瀏覽器支持了嗎？

不，它還沒(méi)有出現(xiàn)在瀏覽器中，而且一段時(shí)間內(nèi)也不會(huì)出現(xiàn)。最樂(lè)觀的估計(jì)是 2 年左右，前提是該過(guò)程不會(huì)在任何時(shí)候停止（通常會(huì)發(fā)生這種情況）。

語(yǔ)法辯論通常會(huì)花費(fèi)很長(zhǎng)時(shí)間，因?yàn)閷?duì)于語(yǔ)法每個(gè)人都意見(jiàn)不一。