[Web Design系列]CSS框架的使用
多數人共同製作一個網站的時候，如果要從零開始打造CSS規則，過程往往會很繁瑣，而且也常常會產生很多破綻。當這種狀況發生，網站整體設計會產生不一致的感覺。如果要預防這種狀況的話，你可以考慮在設計CSS規則的初期，就使用CSS框架來處理。
如何選擇CSS框架
人們一開始會去設計CSS框架，都是為了提高網頁製作的效率，然而若採用的CSS框架和網站本身的設計理念不搭時，反而會導致降低效率。因此，當你在選擇適當的CSS框架時，請注意下面幾點：
- 由整個團隊審核候選的CSS框架是否可以達到目標網站CSS與JS等的需求。
- 一但採用了該框架，最好是從線框稿（Wireframe）製作和網站設計階段就開始使用框架。
- 明確的指出網頁中哪些部分元素是使用框架模組的部分哪些是客製化的部分。
大家必須知道，如果網頁的製作到實際製作HTML時才引入CSS框架，很有可能會帶來某些問題。比較好的做法，是在設計階段就把CSS框架的概念植入。因為，採用與網站實際設計差別很大的CSS框架來製作網頁，對製作者來說是相當痛苦的。
世上框架有很多，各有各的設計理念，框架與框架間的優劣無法一蓋而論。選擇時應依照該專案的需求以及尋求相關人士的意見後進行分析判斷，從中擇一採用。
以框架為基礎的UI設計
前面說到，在設計階段自由自在無拘無束的設計網頁，直到實際要製作成HTML時才引入CSS框架。到這階段才導入CSS框架，會覺得困難重重。那麼該如何在製作線框稿或設計階段就把框架概念植入設計中，才能在實際製作階段受益？
要如何視覺化客製化的模組
不管是哪一個框架，都是由許多元件與模組組合而成的。不論是在網頁設計上或者是在製作成HTML時，可以將模組與元件組合，來產生頁面。在設計頁面前，應該要先理解CSS框架的所有模組與元件，以便在設計時可以自由地運用這些元件來組成網頁畫面。
比如說，一開始設計網站時，可以一頁接著一頁，逐頁的進行設計。一但累積了一些概略的設計後，從這些已經設計的畫面中找出相同或類似的元件或模組，把這些部分抽取出來當作設計的基礎，此後設計的頁面儘可能地從這些元件與模組中取出來使用。
因此，想要做到如此整體且精細的網站設計，必須從製作線框稿時，就開始使用CSS框架的元件與模組。
改變框架中的參數
大多數的CSS框架都可以透過調整屬性值（如：Sass或Less等），來簡單的改變結果，實現客製化元件或模組。如果可以的話，最好是在設計的階段，就把想要改變的數值或屬性的變數標示出來，比如說按鈕的弧度要從4px改為6px，字體要從16px改為18px，顏色要從原來的顏色調暗10%等等。這樣子做，對於後續製作網頁HTML來說，可以大大的提高效率。
以Bootstrap這個CSS框架來說，檔案中有一個 _variables.scss檔，裡面搜集了整個框架的所有變數，並輔以詳細的註釋。只要詳細看這個檔案，就能較容易讓您在設計階段假設網站客製化的範圍及規模。
甚至於在設計時，可以明確的制定變數值該如何改變的設計。可以讓從設計頁面到實際製作HTML的整個製作流程中，急遽的提高效率。
CSS框架有哪些
CSS框架有很多，而且新框架不斷的在產生中，有些框架也漸漸被淘汰。以下列舉幾個主要的CSS框架。
Bootstrap是目前被最多人使用的CSS框架。因為積累了多人的豐富專業知識與經驗累積，想要透過框架製作任何需求，幾乎都很容易達成。實用的CSS Class類別累積了很多，但是由於採用的CSS Class類別名稱太通用，有些模組反而難以自定義客製化的樣式是他的缺點之一。檔案肥大，也是採用Bootstrap框架的另一個缺點。在某些專案中，可能只使用到整個框架中的30%以下的CSS樣式。這種狀況恐怕會影響到網站的速度，必須再度進行優化。
Bourbon
與HTML脫鉤，純粹是SASS，基於Mixin設計的框架，輕量、可讀性高。
結論
- CSS框架可提高CSS執行效率以及UI設計的一致性。
- 市面上存在的CSS框架有很多，包括Bootstrap和Foundation。
- 可以根據自身的需求、設計和熟練度來選擇CSS框架。
