引言

將近20年，CSS終于在所有現(xiàn)代瀏覽器實(shí)現(xiàn)了原生嵌套語法,是時(shí)候淘汰less/sass等預(yù)處理器了

CSS原生嵌套瀏覽器兼容性查看

來自 Web 開發(fā)者的呼聲

2012年4月13日，CodePen 的聯(lián)合創(chuàng)始人 Chris Coyier 抱怨 CSS 的類名不支持命名空間，導(dǎo)致要寫好多重復(fù)的選擇器。

2016年2月2日，微軟的項(xiàng)目經(jīng)理 Kenneth Auchenberg 說如果 CSS 支持了變量和嵌套，他將不再使用預(yù)處理器。

2016年12月8日，《CSS揭秘》的作者 Lea Verou 調(diào)研了使用 CSS 預(yù)處理器的首要原因（單選題），有 1838 個(gè)人參與了投票，最終并列第一的兩個(gè)理由是嵌套和變量。她覺得是時(shí)候該重新考慮 CSS 原生嵌套的問題了。

2017年7月13日，集設(shè)計(jì)和開發(fā)才能于一身的 UI/UX 自由工作者 Sara Soueidan 說嵌套是她最想要的 CSS 功能。

2017年8月15日，node-inspect 的作者 Jan Olaf Krems 說 cssnext 把嵌套定義成了“明天的 CSS”，但他還是想看到原生的 CSS 嵌套，畢竟 JS 的生態(tài)系統(tǒng)已經(jīng)證明避免“每個(gè)人都使用自己的半標(biāo)準(zhǔn)語言”絕對是健康的。

2018年2月23日，Lea Verou 再次發(fā)聲，說她現(xiàn)在還在用 CSS 預(yù)處理器寫嵌套，一旦 CSS 支持了原生嵌套，她就果斷棄用預(yù)處理。

2018年5月25日，postcss-preset-env 的作者 Jonathan Neal 再次提議重新考慮下讓 CSS 支持原生嵌套（也就是本文章的切入點(diǎn)），這引來了一波熱議。

在嵌套之前，每個(gè)選擇器都需要單獨(dú)聲明，相互之間沒有聯(lián)系。這會(huì)導(dǎo)致重復(fù)、樣式表冗余和開發(fā)體驗(yàn)分散。

示例

嵌套之前的示例：

嵌套之后，選擇器可以繼續(xù)編寫，并且與之相關(guān)的樣式規(guī)則可以在其中進(jìn)行分組。

嵌套之后的示例：

嵌套可以幫助開發(fā)人員減少重復(fù)選擇器的需求，同時(shí)還可以將相關(guān)元素的樣式規(guī)則放在一起，提高樣式與目標(biāo)HTML匹配的能力。如果在前面的示例中刪除了.nesting組件，您可以刪除整個(gè)嵌套組，而不是在文件中搜索相關(guān)的選擇器實(shí)例。

嵌套的作用

嵌套可以幫助：

• 組織代碼

• 減小文件大小

• 進(jìn)行重構(gòu)

嵌套從Chrome 112版本開始提供支持，并且在Safari技術(shù)預(yù)覽版162中也可以嘗試使用。

更多嵌套示例

CSS嵌套規(guī)范中包含了更多示例。如果您想通過示例了解更多關(guān)于語法的內(nèi)容，該規(guī)范涵蓋了各種有效和無效的示例。

理解嵌套解析器

要在CSS嵌套中取得最好的效果，我們可以研究解析器在處理嵌套時(shí)的工作原理。了解這一點(diǎn)，我們可以自信地嵌套樣式，而不必經(jīng)常查找規(guī)則。

首先，最簡單的方法是識(shí)別觸發(fā)解析器開始消耗嵌套樣式的符號(hào)。

& @ : . > ~ + # [ *

這些符號(hào)應(yīng)該看起來很熟悉。其中一些是組合器，一些是選擇器。所以最簡單的情況是，如果解析器發(fā)現(xiàn)您的嵌套選擇器，并且它不以這些符號(hào)之一開頭，它將失敗，并錯(cuò)誤地消耗您的樣式。

![& @ : . > ~ + # *. 嵌套選擇器以這些符號(hào)之一開頭嗎？如果是，則有效。如果不是，則無效。

功能檢測

有兩種非常好的方法來檢測CSS嵌套：使用嵌套或使用@supports檢查

使用嵌套：

使用@supports檢查：

@supports not ((nesting: normal)) {  /* 在這里使用傳統(tǒng)的樣式 */}

這兩種方法都依賴于嵌套的nesting功能。在支持的瀏覽器中，第一個(gè)嵌套示例將起作用，而第二個(gè)示例將被忽略。在不支持嵌套的瀏覽器中，情況正好相反。

總結(jié)

CSS嵌套使開發(fā)者能夠以更直觀和組織良好的方式編寫樣式規(guī)則。它有助于減少代碼重復(fù)、提高可讀性，并提供更好的維護(hù)性和重構(gòu)能力。

使用嵌套時(shí)，確保理解如何正確放置選擇器和使用&符號(hào)來連接或附加選擇器。此外，熟悉無效的嵌套示例，以避免錯(cuò)誤。

在實(shí)際使用CSS嵌套時(shí)，請記住進(jìn)行功能檢測，并考慮適當(dāng)?shù)幕赝嘶蛱娲桨?，以確保在不支持嵌套的瀏覽器中也能提供一致的體驗(yàn)。

最后，請記住，嵌套應(yīng)該是有意義的，并且應(yīng)該提高代碼的可讀性和可維護(hù)性。避免過度使用嵌套，以免引入樣式的復(fù)雜性和性能問題。使用嵌套時(shí)，請遵循一致的命名約定和最佳實(shí)踐，以確保團(tuán)隊(duì)成員可以輕松理解和維護(hù)代碼。

查看原文