中場休息時間，我們來聊一些有趣的東西。畢竟是假日，所以再繼續談一些切版的瑣碎，難免會喘不過氣來。倦怠是難免，就像是切版切久了總是會膩，會手癢想玩一些新的把戲。
像是 CSS Framework 這樣的玩具（哪裡有輕鬆啊你）。
CSS Framework
雖然名字叫做樣式表框架，但是事實上稱他們為框架是有點過而不及。簡單的說，CSS Framework 提供了我們一定的規則可以依循，依照這些規則，能夠快速的打造一些較為制式的樣式輸出。
我比較推崇 960 或是 YUI 對於 CSS Framework 的說法，叫做 Grid CSS。這種說法是比較貼切的，因為他的確提供了我們固定的規則可以依循。但是，我也說過，有些規則是用來打破的。
是，這些規則適合用來打破。
其實上 Google 查詢這一類的資源，可以查到非常多。我只列出這四個是因為我都用過。實際上我也用過前兩個（Blueprint, 960 Grid CSS），在工作上實作出許多樣板。所以，我可以來告訴你這些Grid CSS有什麼利弊。
好處是：
- 固定的命名規則
- 固定的樣式規則
- 漂亮的元素輸出
- 適用多種頁面尺寸
- 快速上手
- 樣式無用論
Style Agnostic: 樣式無用論（是我擅自胡亂翻譯的），意思是說，你不用知道 CSS Framework 裡面的設定到底要幹麼，你只要知道怎麼用就行了。
缺點是：
- 區塊樣式不合用時不易修改
- 區塊樣式不合用時不易修改
- 區塊樣式不合用時不易修改
- 區塊樣式不合用時不易修改
- 區塊樣式不合用時不易修改
- 區塊樣式不合用時不易修改
我不是來亂的，我是認真的。舉一個 Blueprint 的例子來說：
<section id="main" class="span-5">
</section>
<aside id="sidebar" class="span-19 last">
</aside>
大家大概不能理解，上面到底在做什麼，我來說明一下。span-5 與 span-19 在Blueprint中，是代表著使用 5, 19 欄的設定。欄位寬度是固定的，所以這樣的結果，就是使用 5 欄寬，與 19 欄寬。接著 last 在Blueprint中，是代表著這個區塊不使用留白設定。
問題在哪裡？
以Blueprint的設定來說，span-1 單一欄位寬度預設是 30px，而留白固定是右方留白（margin-right），寬度設定是 10px。所以，以剛剛的 span-5 與 span-19 來說，我們得到的區塊就是 200px 加上 750px，總共寬度就是 950px 了。
萬一，我們的 <aside> 要的是 220px 怎麼辦？萬一，我們的 main 與 sidebar 之間的留白需要 15px 怎麼辦？
打破規則的問題
我們有一個可以作弊的地方，利用這種Grid CSS每一個欄位中間會有留白的特性，將我們所需要的尺寸溢出到這些空白中。當然，這是治標不致本的作法。所以這是一個很麻煩的缺點。
既定的規則可以帶來一些好處，但是，在這些規則背後被綁死的東西，其實很有可能比你想像的還多，例如樣式無用論。雖然像是Blueprint有一些計算機可以用，不過，這也就代表著你必須去對於Blueprint的結構有一定程度的理解。
這也就違背了最初的樣式無用論。
Blueprint Calculator: http://bluecalc.xily.info/
自己刻，比較快
這種事情也沒個準，不想被規則束縛的話，自己從頭開始做當然是比較自由的。但是，如果每一次的專案都要從頭來過，是不是又太過於惱人了點？所以要不要用要這寫Grid CSS來當作切版的基準，就見仁見智了。
好工具，就算打破規則也是好工具。樣式無用論背後所代表的意義，其實就是基於規則，做你自己。這才是Grid CSS的最終精神。並不一定要完全拋棄，且戰且走才是上上之策。
邊開火邊移動，你遲早會贏
