CSS框架是預先準備好的軟體框架，允許使用層疊樣式表語言更容易，更符合標準的進行網頁設計。大多數這些框架包含至少一個柵格設計（grid）。功能更強大的框架，還配備了更多的功能和附加的基於JavaScript的功能，但大多設計導向的和Unobtrusive JavaScript。本文從功能和充分的JavaScript框架區分它們。
兩個顯著和廣泛套用例子是Bootstrap和Foundation (framework)。其他awsm.css, Flexify, Materialize, Semantic UI。
基本介紹
- 中文名：css框架
- 產生原因：從最初只是定義文字顏色
- 定義：是一系列 CSS 檔案的集合體
- 特徵：有固有的定義及開發特點
- 優點：提高開發效率
產生原因,定義,特徵,開發順序,優缺點,優點,弊端,常用css框架,960gs,YUI 2: Grids CSS,渴切-開源中文css框架,Blueprint,BlueTrip,Bootstrap,Elastic CSS,Easy,EZ-CSS,Tripoli,CleverCSS,SenCSS,
產生原因
編寫css也是一樣，從最初只是定義文字顏色、內容排版，到定義所有的表現。css框架也漸漸被重視了，因為大家都認識到：從具象的表現中抽出抽象的模組來重複使用，是減少用戶下載、方便團隊及個人開發最重要的手段。
定義
特徵
1.抽象出常用的css樣式,高再可用性,高移植性
2.有固有的定義,詳細的文檔及開發特點
3.高兼容性,可以兼容流行的瀏覽器
4.以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用於兼容瀏覽器
開發順序
a)格式化reset.css
格式化css的真正好處是能夠快速啟動工作，你可以在新的HTML檔案里引入框架，不用再處理重置padding 和 margin，實現統一的排版、瀏覽器下的相同表現。
b)布局layout.css
定義頁面是二欄還是三欄，是全螢幕還是1024×768……
一個網站的設計可能有很多種布局，但是大多數都是由幾個具有復用性的布局組成，選擇性的引入所需要的布局，可以很快地套用所期望的頁面布局。
c) 基本樣式 type.css
定義body、h1-h6、a:link-a:active、p等的字型大小和顏色。
基本樣式的css引用，譬如將ul定義class為“ul-text”，用來展現相同的icon、行間距、連結色彩。
還可以像這樣套用：class=”ul-text square”，li前展現的是方型的icon。
d)表格修飾 table.css
和基本樣式一樣，但是表格在現有網站的展現形式幾乎都是處理數據，所以分開存放引用。譬如在table上套用table-style-1便是黑色框線的表格，table-style-2便是黃色框線的表格。
e)表單修飾 form.css
大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css，是為了便於統一在各個瀏覽器中的展現。默認的按鈕、輸入框等在各個瀏覽器下的展現區別很大，雖然在格式化的css中已經初步的統一，但是輸入框的框線，按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一，如果考慮到用js實現的話，這個成本太大了點。
f) 列印修飾 print.css
修飾列印輸出的頁面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根據各種引用去引入相應的css。譬如list頁面中沒有需要表格的修飾，那就不引入table.css。以節約代碼量。
優缺點
優點
a) 提高開發效率。
b) 規範名稱定義，便於維護。
c) 規範項目開發流程
d)css代碼更清晰、簡單。html代碼更合理。
e) 大規模項目中可以減少用戶下載
弊端
a) 學習成本提高。你需要了解整個框架，需要閱讀框架的文檔。
b)css框架對於一個小項目等頁面來說很臃腫。框架中可能有大部分你用不到的代碼。
c)可能會無法幫助你的技術提高。太依賴框架，以至於很難排除bug。包括框架中本身就帶的bug。
d) 選擇自己需要的框架與開發框架都很痛苦。寫到後面發現越來越不靈活，越來越臃腫。
常用css框架
960gs
960 像素的頁面寬度似乎成為了一種設計標準，在當前各種解析度下，能夠很好地展現網頁內容。提供較為常用的尺寸來簡化網頁設計過程，使工作簡單高效。
YUI 2: Grids CSS
芒果曾經介紹過由雅虎開發小組推出的 YUI，而這個 YUI Grids CSS 正是其中的一部分。作為最著名的 CSS 框架之一，YUI Grids CSS 提供了四種預設頁面寬度，六種預設模板。其中的負 Margin 技術，使用度量單位 em，清除布局浮動等技術非常值得學習和借鑑。
渴切-開源中文css框架
渴切(Cutter.css)是一個開源中文 (X)HTML/CSS 框架 ,它的目的是減少你的css開發時間。它提供一個可靠的css基礎去創建你的項目,能夠用於網站的快速設計,通過重設和重建瀏覽器標準，可以讓每個網站防 止枯燥的跨瀏覽器兼容性測試。你可以將他理解成一套模板，裡面包含了大多數站點中所需要的那些css類。他很小，只有四個檔案而已。總共不到6KB。
Blueprint
Blueprint 是一款成熟的 CSS 框架，它將布局(layout)、排版(typography)、組件 (widget)、重置 (reset)、列印 (print) 等分放到不同的 CSS 檔案中。在網頁設計時就減少了引入的代碼，提高了頁面載入效率。
BlueTrip
BlueTrip 是一個集成了BluePrint & Tripoli 框架的做好的部分；Hartija 的列印樣式； 960gs的簡潔；Elements 圖示的一個css框架。為你提供一個好用的樣式集合和一個製作網站的通用的方法。這樣你就可以集中精力搞設計了。
Bootstrap
Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。它是一款簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。其自帶的js以及css可以完成絕大多數常用的網頁特效與回響功能，是一款不錯的框架。
Elastic CSS
Elastic 是一個簡單的 CSS 框架用來對網頁進行布局。Elastic 可實現各種各樣常見的網頁布局。
Easy
市面上流行的JQUERY組件功能都被納入其框架中，你只要直接使用這個框架，不用學習複雜的AJAX JQuery語法，非常方便。
EZ-CSS
EZ-CSS是一個輕量級，瀏覽器友好，易於使用的CSS框架。用於創建CSS+Div的頁面複雜布局（layouts）。
Tripoli
Tripoli是一個用於HTML表現的通用css規範。通過重設和重建瀏覽器標準，Tripoli 為你的網站項目提供了一個標準的、跨瀏覽器表現的基礎。
CleverCSS
CleverCSS 是一個用於css的受Python啟發的小型的標記語言，它可用於以整潔的和結構化的方式創建一個樣式表。在很多方面它都比CSS2整潔和強大。與CSS最明顯的區別是句法：它基於縮進而且不單調。雖然這顯然違反了Python的規則，它依然是組織樣式的很好的主意。
