克軍談CSS（《Sass與Compass實戰》推薦序）

回顧一下做過的專案，會發現我們曾經多麼忽視CSS！JavaScript有著高大上的設計模式和模組規範，分佈在精心設計過的目錄裡，而CSS僅僅被簡單地堆積在一個檔案裡。它不重要嗎？前端開發最基本的任務就是還原設計，離不開用CSS實現那些複雜的佈局和絢麗的效果（後面還會提到它在移動Web開發中的重要性）。它簡單嗎？HttpArchive統計全球Top100網站平均單個頁面CSS達到31 KB，在頻繁的迭代中維護它們並不輕鬆。更不要說眾所周知的痛點——瀏覽器相容性了。CSS既然如此重要，又不簡單，為什麼沒有像它的小夥伴JavaScript那樣得到重視和發展呢？

種種原因中有一個很明顯——它不是語言。CSS開發是基於渲染原理和W3C標準（及事實標準）來設計規則的，這裡邊沒有演算法，沒有資料結構，沒有邏輯控制。這讓習慣語言開發的程式設計師無從生成思路。一個好的後端程式設計師可以很快掌握JavaScript，但面對CSS就會變得茫然無助。於是便會簡單粗暴地把所有程式碼隨意寫在一起，所有佈局都用float實現。表面上看把問題解決了，實際上是在到處“埋雷“，到處補“破窗“。這種慢性後果並沒有激發CSS在語言方面更快發展。保持簡單，複雜的效果讓Javascript/Flash去幹吧，似乎問題就能迴避。但很快移動端的崛起打破了秩序，先是把Flash宣判了，JavaScript在手機上的效能和能耗成為瓶頸，CSS3則在GPU的作用下看起來異常完美，於是一下子被推上風囗波尖。曾經那些塵封的草案又被喚醒。各大瀏覽器廠商競相實現最新特徵。炫酷的2D/3D動畫效果、高階的FlexBox佈局……CSS3一夜之間上了頭條。隨著應用的深入，最初的快感很快退去，新的相容性問題又來了，瀏覽器的種種bug，鬧心的廠商字首，剛學到就被廢棄的標準......在這種形勢下CSS的開發想保持簡單也難。

浮華過後，人們開始認真思考如何提高CSS的開發效率和可維護性等工程問題。Sass早在2007年誕生於“工具控”的Ruby社群，開始服務的物件自然是Ruby工程師，是為了讓他們能像寫Ruby那樣寫CSS。直到推出SCSS這種語法風格，Sass變得更像是CSS的擴充套件和增強，可以跟原生CSS混寫，很快被前端工程師接納了。現在在我的專案裡，一眼望去都是.scss檔案。據我所知，國內各大網際網路公司前端團隊的CSS開發也都轉向Sass或LESS。如果你是前端工程師或有志成為前端工程師，非常有必要把這塊納入到自己的技能體系中。

Sass讓CSS變成語言，可以像其他語言那樣去組織模組、封裝、複用程式碼，讓CSS開發看上去非常有“設計感“。在大規模的網站開發中，Sass的用法變得至關重要。其實任何工具都是雙刃劍，用好事半功倍，反之則有破壞性。比如，寫Sass很容易就寫出多層巢狀，生成的CSS選擇器就會有很多級，不僅低效，維護上也很頭疼，以至於出現BEM這種用法。在程式碼設計上，繼承和混合器有什麼區別，怎麼抽象和封裝更好，等等這些由用法引申出來問題值得在實踐中潛心思考。

在技術社群裡經常能看到各種文章介紹Sass的用法或觀念或技巧，辨清優劣，吸收精華，前提是要先對它有系統的瞭解。雖然也能搜到不少中文資料，但很碎片且質量參差不齊。像我這種東看點西看點的人，之前著實走過不少彎路。在一次前端標準化交流會（w3ctech）上，正好碰到李鬆峰老師，吐槽如今光是引進一些介紹眼下流行的JS庫的書，實際上某些JS庫雖然流行但在專案中未必適用。反倒像Sass如此普及而且適用面又廣的技術，沒有一本中文書。沒想到鬆峰老師很快就促成本書的引進，並找到錦江（勾三股四）等有豐富開發經驗的人翻譯。我對本書的出版充滿期待，並相信本書一定會把更多人帶入CSS的世界。

克軍
2014.3.4