Object Oriented CSS Framework For ASP.NET & PHP

無論你是寫網頁程式還是網頁設計，近幾年應該經常聽到Framework這個字。
Javascript有Framework (jQuery, ExtJS, Prototype...) ; PHP有Framework (Zend , CodeIgniter , CakePHP ...) ; ASP.NET本身屬.NET Framework，最近又有MVC Framework等等。

或者很多Web Designer看到"Framework"這個字，都會避之則吉，看似都是和Programming有關，但如果你忽略了的話就走寶了。

近這一年，CSS Framework慢慢冒出來，在delicious.com都開始很多同類Bookmark，亦有很多討論區開始比較各種CSS Framework。

如果你想了解什麼是CSS Framework，建議先看看這幾篇文章。
Definitive List of CSS Frameworks – Pick Your Style
CSS Frameworks: Pros and Cons
CSS framework 利弊淺見

現時CSS Framework大概分兩種，大多數的一種是本身已經定義了很多Style，例如Grid式的Table Template，Header或Footer Style，甚至排板方面都可以直接套用CSS Framework而快速建立完整Design。由於現時CSS Framework定義其實沒有很統一，不同的CSS Framework提供不同的"功能"，但肯定的是，全部都輔助你快速建立Layout。

提供一個CSS Framework選擇參考連結:
10 Promising CSS Framework That Worth A Look

至於另一種亦是我有興趣的是Object Oriented CSS Framework，這種Framework是針對編寫CSS方面，和之前講的一種相反，本身並沒有包含"罐頭"的"即食"樣式。
CSS加上Object Oriented，本身兩種在網頁開發上沒有關係的字詞，很難想像到會是什麼，但看到以下例子後，如果加上少少Programming知識，你就明白箇中奧妙。

Variables
把@brand_color設定成變數重覆使用，假若日後要更改的話，只需要修改一行就可以。

@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}

Mixins
Define 名稱為rounded_corners 的 Property後，可以整個打包去其他的style中使用。

.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

Operations
在CSS中直接進行加減乘除計算。

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer { 
color: (@base-color + #111) * 1.5; 
}

Nested Rules
這類似是OOP的中Class。

#header {
color: red;
a { 
font-weight: bold; 
text-decoration: none; 
} 
}

使用OO寫法的CSS可以簡潔很多，而且可以重覆使用或者承繼。不過暫時OO的CSS選擇並不多。
ASP.NET 的話可以試試.less CSS就有齊以上的功能，PHP的話可以試試xCSS，兩隻都是很容易使用和Setup的。