已幫助數百位同學拿到了中大廠
offer
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
CSS 的條件判斷語句 if()
上周，在西班牙拉科魯尼亞舉行的CSS WG面對面會議中，讓人特別激動的一個決議是大家一致同意向 CSS 中添加行內
if()
語法。😀
實際上，一個功能在被接受之前經常會遭到幾次拒絕，例如
CSS巢狀、:has()、容器查詢
等都是在多次被拒後的最終叠代版本。
if()
在 2018 年曾被拒絕，其語法與我提出的非常相似。不同的是，現在我們已經有了樣式查詢功能，可以簡單地使用相同的條件語法（結合
Tab
在
@when
提案中提出的
media()
和
supports()
）。
if() 的作用？會取代樣式查詢嗎？
相反地，
if()
提供了樣式查詢無法涵蓋的功能。如果您能夠使用樣式查詢來解決問題，那絕對應該優先選擇樣式查詢——它們通常是更優的解決方案。但是，有些情況下，樣式查詢無法滿足需求。
舉個例子，考慮一個名為
--variant
的自訂內容:
它可能包括設定背景顏色、邊框顏色、文本顏色、圖示等。然而，實際上它的確切值可能從未直接在任何地方被逐字使用，而是作為影響其他內容值的設定參數。
樣式查詢讓我們成功了一半：
但是，樣式查詢僅適用於後代。我們不能這樣做：
通常，我們在元素上需要設定的聲明非常少，有時僅僅一個。但是，即使只有一個聲明，對於許多（或許是大部份）更高級的自訂內容用例而言，仍顯得過多，使得使用自訂內容顯得不太實用。因此，元件庫常常轉而使用表示性內容，如
pill、outline、size
等。
雖然這些表示性內容初看之下似乎很合適，甚至在開發體驗（DX）方面似乎更優（使用的字元更少——至少比為每個元素設定單獨的變量要少），但它們存在一些可用性問題：
靈活性降低
它們不能基於選擇器、媒體查詢等有條件地套用。更改它們需要更多 JS。如果它們在另一個元件中使用，那麽您就是 SOL，而對於（可繼承的）自訂內容，您可以在父元件上設定內容，並且它將向下繼承。
冗長
它們必須套用於單個例項，並且不能被繼承。即使人們使用某種形式的樣版化或元件化來減少重復，他們在使用開發工具進行偵錯時仍然必須仔細研究這些內容。
缺乏一致性
由於幾乎每個成熟的元件都支持自訂內容，因此使用者必須記住哪些樣式是透過內容完成的，哪些樣式是透過自訂內容完成的。這種區別通常是任意的，因為它不是由用例驅動的，而是由實施便利性驅動的。
使用
if()
，上面的範例成為可能：
雖然這是主要用例，但事實證明，制作媒體查詢並支持 if() 條件語法的條件部份也非常容易。由於它是一個函式，因此它的參數（包括條件！）可以儲存在其他自訂內容中。這意味著您可以執行以下操作：
然後定義如下值：
就像 JS 中的三元組一樣，對於只有一小部份值變化的情況，它也可能更符合人體工程學：
瀏覽器支持了嗎？
不，它還沒有出現在瀏覽器中，而且一段時間內也不會出現。最樂觀的估計是 2 年左右，前提是該過程不會在任何時候停止（通常會發生這種情況）。
語法辯論通常會花費很長時間，因為對於語法每個人都意見不一。
所以需要一段時間去完成這些工作
結語
我是林三心，感謝您的閱讀~
1v1私教、找工作、全程陪跑、終身服務
。
可直接加 Sunday老師 微信溝通，回復【資料】可直接領取 Sunday獨家整理 大廠面試題、大廠真實面經 ：
