CSS是一個令人又愛又恨的樣式定義語言,除了有跨瀏覽器的問題,寫起來也是又臭又長又麻煩,於是我曾經尋找過一些CSS的解決方案,找到過一些純CSS的Framework,這些都不太能夠被我接受,因為那些Framework僅僅是定義一些通用的語法,彈性並不是很高,寫起來也不是很符合CSS的概念及原則,但最近一連串發現一些還算新的CSS編寫觀念及Framework,以程式語言的概念多加入一個編譯層使CSS的撰寫更人性化。
不是CSS3
CSS3是目前最新的CSS版本,增加了許多原本CSS2沒有的樣式定義,儘管如此它仍然只是侷限在樣式定義、選擇器的增強,對於CSS撰寫邏輯並沒有改變,因為這也不是CSS本身應該做的工作。
簡單不重複
經常在老外的文章看到他們似乎很喜歡且倡導兩個觀念:
DRY (Don’t Repeat Yourself)
沒錯,這才符合懶人的原則嘛!但認真說起來也不盡然是懶惰,能夠透過方法達到的事情,為何要自己重複?能夠交給電腦做的重複工作,為何要自己做?
KISS (Keep It Simple and Stupid)
如果一件事情可以把它簡單化,為何要把它搞的很複雜?我可不希望為了證明自己不笨而把事情搞的複雜、難做、難理解,反過來說,能夠透過方法把複雜的事情簡單化,或許才是真正的聰明。
改變你的CSS撰寫方式
在以前我們使用以下的方式寫CSS,單純的寫CSS,單純的被瀏覽器解析、渲染,這很正常也沒有什麼不對。

但現在可以改用增強型或稱新的CSS語法撰寫CSS,再透過編譯器的解析產生出符合規範的CSS語法交給瀏覽器,而編譯的過程可能是即時的,透過這樣的方式將會減輕許多CSS編寫的麻煩,也會讓編寫出來的CSS更容易維護。

幾款擁有新CSS語言的Framework
之前發現了一款好用的CSS Framework – CSScaffold,後來又發現了另兩款類似的CSS Framework – xCSS 與 Compass,而且似乎都繼承自一個名為SASS的CSS語法觀念,看來CSS的撰寫應該已經進入了另一個世代了。
CSScaffold
這是一款非常值得推薦的CSS框架,詳細說明請參閱上一篇文章:CSScaffold – 幫助建構複雜CSS的「鷹架」
特色:
- 強化標準CSS語法
- 讓CSS語法可以有常數(Constant)。
- 讓CSS語法可以有函數(Function),當然也可以傳參數(Parameter),官方稱之為Mixins。
- 讓CSS語法可以巢狀結構(Nested Structure)。
- 讓CSS語法可以有插件(Plugin)。
- 讓CSS屬性可以用表達式(Expressions)指派其值。
- 讓CSS屬性可以用條件式(Conditionals)指派其值。
- 重複利用
CSS本身有一個可加強網頁撰寫時重複利用的特性,而CSScaffold讓這個特性更加明顯。
- CSS結構化
標準的CSS語法常常會讓我們的CSS內容雜亂不堪難以維護,而CSScaffold可以降低這個困擾。
CSSaffold官方:http://wiki.github.com/anthonyshort/csscaffold
xCSS
xCSS,它強調物件導向的功能,它的靈感來自SASS 及OO CSS,雖然xCSS看起來相當不錯,但目前我感覺仍是CSScaffold的功能較強大且完善,目前xCSS僅在v0.9.4 (beta)測試階段,希望將來它可以再進一步增強它的功能性。
xCSS官方:http://xcss.antpaw.org/
特色:
- CSS選擇器繼承(這是一個利用物件導向繼承特性加強重複利用的好方法)
- 巢狀子物件(Nesting child objects)或稱巢狀結構(Nested Structure)
- 變數(Variables) 與 CSScaffold的常數很像。
Compass
這是一款以Ruby實現SASS的CSS Framework,不同xCSS、CSScaffold的即時編譯,它必須使用命令列執行預先編譯,除了功能強大之外,另一個好處應該是不侷限在PHP上。
Compass官方:http://compass-style.org/
特色:
- 使用命令列執行編譯。
- 語法與SASS相同。
- 語法結構、功能相當完善。
- 預先編譯減少即時編譯的效能損耗
以下有一部作者錄的教學影片,有興趣的話可以看一下作者親身示範說明,但影片很大建議先下載再觀看(362 MB…XD)
Compass: A Real Stylesheet Framework from Chris Eppstein on Vimeo.




