2024年了，為什么 CSS 預處理器依然火爆？
Hello，大家好，我是 Sunday。
隨著前端工程化的不斷提升，CSS預處理器已經成為了項目中不可或缺的一部分，很多人在項目技術選型時都會選擇一款CSS預處理器，大部分前端腳手架也包含了一系列CSS預處理的模板，大家已經習慣了CSS預處理器帶來的靈活、流暢的代碼編寫體驗，而原生的CSS則被忽視了。
很多前端開發者可能還認為 CSS 預處理器是一個比較新的技術，但事實上并非如此。最早的 CSS 預處理器 Sass 誕生于 2007 年，也就是說它已經存在了 17 年。而相對較新的 Stylus 也已經發布了 14 年。
前端技術棧的發展日新月異，W3C 的 CSS 工作組也不斷從社區中汲取靈感，加速 CSS 的迭代。那么，CSS 是否能夠取代 CSS 預處理器的地位？CSS 預處理器是否會成為 CSS 過渡期的產物？
W3C 簡介
CSS 是開放網絡的核心語言之一，由W3C制定，用于跨瀏覽器實現。因此，在深入了解 CSS 規范更新的進展之前，有必要先了解 W3C 及其標準化進程。
W3C，又稱萬維網聯盟或 W3C 理事會，是萬維網的主要國際標準組織。它是一個半自治的非政府組織，由蒂姆·伯納斯-李于 1994 年 10 月在麻省理工學院計算機科學和人工智能實驗室 (MIT/LCS) 創立。
W3C 制定了一系列標準，并鼓勵網絡應用程序開發者和內容提供商遵守這些標準。這些標準涵蓋了所用語言的規范、開發指南和解釋引擎的行為。W3C 制定了許多有影響力的標準規范，包括HTML、DOM、SVG、XML和CSS
W3C 規范制定流程
由于我們需要在不同的階段討論CSS規范，因此有必要簡單介紹一下W3C的規范發展過程。
根據W3C 的流程文檔，推薦標準的制定要經歷多個階段。
主要階段如下：
- WD：工作草案
- CR：候選人推薦
- PR：提議的建議
- REC：W3C 建議
由于篇幅有限，我們在這里就不詳細介紹W3C的標準流程了，如果想詳細了解W3C的標準流程和組織架構，可以參考W3C的標準流程和組織架構。
CSS 的歷史
HTML 和 CSS 緊密相關，以至于您我們能認為它們是同時出現的。
但是事實上，直到 1989 年 Tim Berners-Lee 發明互聯網多年后，世界上才有了 CSS（更不用說 CSS 預處理器了）。最初的網絡版本并沒有提供設置網頁樣式的方法。
雖然 HTML 規范定義了網頁中標題和段落的標簽，但它并未規定這些內容在瀏覽器中的呈現方式，例如：大小、位置、間距、縮進和其他屬性。
CSS1
1994 年，H?kon Wium Lie和Bert Bos合作設計了 CSS。他們在 1994 年芝加哥的一次會議上首次提出了 CSS 提案。
CSS1 的要求于 1996 年 12 月發布，主要定義了：選擇器、樣式屬性、偽類和對象。
CSS2
CSS2 由 W3C 于 1998 年 5 月發布，基于 CSS1 設計，并擴展和改進了許多更強大的屬性，包括：選擇器、定位模型、布局、表格樣式、媒體類型、偽類和光標樣式等。
層疊樣式表第 2 級修訂版 1（通常稱為“CSS 2.1”）修復了 CSS2 中的錯誤，刪除了支持不佳或不兼容的功能，并添加了已實現的瀏覽器擴展。為了遵守 W3C 技術規范的標準化流程，CSS 2.1 多年來一直在工作草案 (WD) 狀態和候選推薦 (CP) 狀態之間徘徊。
CSS 2.1 于 2004 年 2 月 25 日成為候選推薦標準 (CR)，但于 2005 年 6 月 13 日返回工作草案 (WD) 進行進一步審查。隨后于 2007 年 7 月 19 日返回候選推薦標準 (CP)，并于 2009 年進行了兩次更新。然而，由于修改和澄清，它于 2010 年 12 月 7 日再次返回最后工作草案。
CSS3
CSS3是層疊樣式表語言的最新版本，旨在擴展CSS2.1。
CSS Level 2 從 2002 年 8 月到 2011 年 6 月花了九年時間才達到推薦狀態，這主要是因為一些小特性滯后。為了加快那些已經確認沒有問題的特性的標準化進程， W3C 的CSS 工作組做出了一個叫做“北京主義（Beijing doctrine https://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules）”的決定，將 CSS 分成許多稱為模塊的小組件。
這些模塊彼此獨立，并根據其進度進行標準化。其中一些已經達到 W3C 推薦狀態，而其他一些仍處于早期工作草案階段。當新的需求得到確認時，也會以同樣的方式添加新的模塊。
從形式上看，CSS3 標準本身已不復存在。每個模塊都是獨立標準化的，當前的標準 CSS 包括修訂后的 CSS2.1 和擴展它的完整模塊，每個模塊的級別各不相同。可以在每個時間點為 CSS 標準定義快照，列出 CSS 2.1 和成熟模塊。
W3C 定期發布這些快照，例如2007、2010、2015或2017。
到目前為止，第 3 級以上的模塊尚未實現標準化，但未來可能會有所改變。不過，有些模塊（如選擇器 4 或 CSS 邊框和背景第 4 級）雖然尚未達到“首次發布工作草案”的狀態，但已經有了編輯草案。
有一張圖可以更直觀的表示當前CSS3 Modules的分類和現狀：
CSS 預處理器
CSS 自誕生以來，基本語法和核心機制并沒有發生過根本性的變化，長期以來其開發主要集中在提升表達能力上。
最初，CSS 只是起到網頁裝飾的輔助作用，輕量、易學是首要訴求，但如今網站已經變得異常復雜，單靠原生的 CSS 已經無法滿足開發者的需求。
當一種語言的能力不足，而用戶的運行環境又不支持其他選擇時，這種語言就會成為一種“編譯目標”語言，開發者會選擇另一種更高級的語言進行開發，然后再編譯成低級語言進行實際執行，因此在前端領域，CSS預處理器應運而生，擔負起重任。
預處理器百花齊放
CSS 預處理器是一個允許您使用其自己獨特的語法生成 CSS 的程序。
市面上有很多 CSS 預處理器，絕大多數都加入了原生 CSS 所不具備或者不夠完善的高級特性，使得 CSS 的結構更加易讀，也更加易于維護。
目前社區中主要的 CSS 預處理器有以下幾種：
- Sass：誕生于2007年，是最早最成熟的CSS預處理器，擁有Ruby社區和Compass的支持，是目前最強大的CSS框架，目前受LESS的影響，已經演化為全面支持CSS的SCSS。
- Less：出現于 2009 年，深受 SASS 影響，但使用 CSS 語法，對大多數開發者和設計人員來說更容易上手。在 Ruby 社區之外，其支持者數量遠超 SASS。其缺點是相比 SASS，可編程功能不足；但其優勢在于簡潔和與 CSS 的兼容性。這也影響了 SASS 向 SCSS 時代的演進。著名的 Twitter Bootstrap 就是以 LESS 作為底層語言。
- Stylus：Stylus 是 2010 年從 Node.js 社區中誕生的 CSS 預處理器框架，主要用于為 Node 項目提供 CSS 預處理支持。因此，Stylus 是一種新型語言，可以創建類似于 SASS/LESS 的健壯、動態、富有表現力的 CSS
各種預處理器功能雖然強大，但最常用的依然是：變量，混合，嵌套規則和代碼模塊化。
這些功能在 css 中也有
返回 CSS
各類 CSS 預處理器在更新迭代的過程中變得越來越復雜和花哨，但大多數人還是使用同樣的核心功能：變量、混合、嵌套、模塊，最多一些實用功能。
這些功能在 css 中依然存在
變量
CSS 自定義屬性（也稱為 CSS 變量）允許我們在樣式表中聲明變量并通過 var() 函數使用它們。
CSS 自定義屬性中的級聯變量規范于 2012 年 10 月首次作為工作草案（WD）提出，并于 2015 年 10 月進入候選推薦（CR）階段。現在瀏覽器支持率接近 93%。
圖片
CSS變量的定義及使用如下，可定義的類型非常廣泛。
/* 聲明 */
--VAR_NAME: <聲明值>;
/* 使用 */
var(--VAR_NAME)
/* 根元素選擇器（全局作用域），例如 <html> */
:root {
/* CSS 變量聲明 */
--main-color: #ff00ff;
--main-bg: rgb(200, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}
body {
/* 使用變量 */
color: var(--main-color);
}與 SASS 預處理器變量的編譯時處理不同，CSS 變量由瀏覽器在運行時處理，這使得它們更加強大和靈活
CSS 到 JS
在 CSS 變量出現之前，將值從 CSS 傳遞到 JS 非常困難，甚至需要一些 hack 技巧?，F在有了 CSS 變量，可以直接通過 JS 訪問變量值并進行修改。
// 定義 CSS 變量
.breakpoints-data {
--phone: 480px;
--tablet: 800px;
}
const breakpointsData = document.querySelector('.breakpoints-data');
// 獲取 CSS 變量的值
const phone = getComputedStyle(breakpointsData)
.getPropertyValue('--phone');
// 設置 CSS 變量的新值
breakpointsData.style
.setProperty('--phone', 'custom');除此之外還有很多 css 原生能力，比如：Mixins、運算符，咱們就不再文章中一一列舉了。
總結
經過一番梳理我們發現，CSS雖然在社區的刺激下加快了其更新迭代速度，但依然達不到CSS預處理器的水平，只能說在使用CSS預處理器的同時，也可以在項目中嘗試一些非常優秀的CSS新特性，即：CSS preprocessor + CSS。
不過我們還是相信隨著 W3C 的推廣和 CSS 本身的不斷完善，CSS 預處理器終究會像CoffeScript和Jade當年一樣成為過渡性的產品，到那時大家就不用再為不同 CSS 預處理器的各種環境配置和技術選擇而煩惱啦。
