聊聊CSS postproccessors

標籤：des   android   http   io   ar   os   使用   sp   for   

 

阿里媽媽 @一絲 準備發布其CSSGrace，即CSS後處理外掛程式，於是順便聊聊CSS postprocessors。

從Rework說起

Rework是TJ大神開發的CSS預先處理架構。但為什麼會出現呢？TJ大神如此回答：

The simple answer is that Rework caters to a different audience, and provide you the flexibility to craft the preprocessor you want, not the choices the author(s) have force on you.
Our goal with Rework contrasts the others, as it does not provide a higher level language within the CSS documents, Rework’s goal is to make those constructs unnecessary, being the most transparent CSS pre-processor out there.

簡單地說，就是從之前的特定CSS前置處理器，轉而成為通用式CSS預先處理架構，通過外掛程式，可自訂擴充功能。

我用compass用得正爽，憑什麼用你？

• 工程師喜歡瞎折騰，滿足其DIY樂趣
• 現代前端，多端多屏、需要不同相容情境下情況下，CSS前置處理器需要深度定製，來看看我們沒有深度定製的後果：
  1. 我們經常使用@include border-radius;，可你知道compass這個mixin有啥問題嗎？

     .btn-default { -webkit-border-radius: 2px } // 僅在 android 2.1, chrome 4, ios_saf 3.2, safari 4 或更早期版本適用.btn-default { -moz-border-radius: 2px } // 僅在 firefox 3.6 以前版本適用.btn-default { -ms-border-radius: 2px } // 根本不存在 -ms-border-radius.btn-default { -o-border-radius: 2px } // 這玩意早就淘汰了

  2. 我們也經常用@include transition();，但：

     .course-card .course-agency { -moz-transition: .3s } // 僅在 firefox 15 以前版本適用.course-card .course-agency { -o-transition: .3s } // 僅在 opera 12 以前版本適用

• 嵌套很強大，但某些時候也是災難
  1. 多層嵌套，代碼維護的災難
     
  2. 多層嵌套導致的單頁應用代碼效能問題，所以Github的CSS規範明確指明Sass嵌套不允許多餘三層（之前我們以為僅僅是維護性原因），有興趣可以圍觀下 GitHub‘s CSS Performance

Autoprefixer革命

在我看來真正帶來革命的不是postcss，恰恰是他的核心組件Autoprefixer。讓我們看看他到底幹了什嗎？

Working with Autoprefixer is simple: just forget about vendor prefixes and write normal CSS according to the latest W3C specs. You don’t need a special language (like Sass) or remember, where you must use mixins.
Just write normal CSS according to the latest W3C specs and Autoprefixer will produce the code for old browsers.

所以呢？如果我們寫了：

a {    display: flex;}

則經過Autoprefixer，會變成：

a {    display: -webkit-box;    display: -webkit-flex;    display: -moz-box;    display: -ms-flexbox;    display: flex;}

並且這些hack資料是從caniuse擷取的，所以能根據你的需要設定你需要相容的瀏覽器。Sounds good！這更像polyfill，我們只用按照標準寫就好了，polyfill會幫忙處理相容性，之後如果無需相容，其會自動去除。

CSSGrace

Make it better!

CSSGrace在我看來主要由於AST的介入，其可能分析出以前preproccessors分析不出來的css錯誤問題，類似csslint的一些靜態分析，以及一絲所說的CSS常見錯誤，例如：float: left/right 或者 position: absolute 後還寫上 display: block，具體參見：http://www.zhihu.com/question/20979831

最後隨想

個人感覺未來Web會Web Component化，無論是以W3C標準以HTML為核心的Web Component，還是類似React以Javascript為核心的Web Component，在縱向力度足夠細的時候，css樣式將趨近與足夠簡單。

在這種背景下，當處理好範圍的情況下（目前沒什麼好辦法，可能只能將class name寫長一點），未來嵌套情境將大大減少，從這一點來看，以前的Sass、LESS等如此強大的前置處理器未必是必需品。

 

聊聊CSS postproccessors