css框架，一把锋利的剑

CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。

产生原因

互联网行业已经发展了多年，浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，让设计师与程序员避免重复开发。

编写css也是一样，从最初只是定义文字颜色、内容排版，到现在定义所有的表现。css框架也渐渐被重视了，因为大家都认识到：从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。

css框架的特征

1.抽象出常用的css样式,高再可用性,高移植性

2.有固有的定义,详细的文档及开发特点

3.高兼容性,可以兼容流行的浏览器

4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器

css框架的开发顺序

a) 格式化 reset.css

格式化css的真正好处是能够快速启动工作，你可以在新的HTML文件里引入框架，不用再处理重置padding 和 margins，实现统一的排版、浏览器下的相同表现。

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、tr、td、th、thead、tfoot、tbody、caption等标签的表现。

和基本样式一样，但是表格在现有网站的展现形式几乎都是处理数据，所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格，table-style-2便是黄色边框的表格。

e) 表单修饰 form.css

定义fieldset、label、button、input 、select、textarea这几个标签的表现。

大多数网站的表单、按钮、输入框几乎都是一样的。之所以引入这个css，是为了便于统一在各个浏览器中的展现。默认的按钮、输入框等在各个浏览器下的展现区别很大，虽然在格式化的css中已经初步的统一，但是输入框的边框，按钮的样式都是需要在这个css中定义的。无奈的是select无法做到统一，如果考虑到用js实现的话，这个成本太大了点。

f) 打印修饰 print.css

修饰打印输出的页面。

g) 包含其他css的css

frontpage.css、list.css、detail.css、register.css等等

根据各种引用去引入相应的css。譬如list页面中没有需要表格的修饰，那就不引入table.css。以节约代码量。

css框架的优点

a) 提高开发效率。

b) 规范名称定义，便于维护。

c) 规范项目开发流程

d) css代码更清晰、简单。html代码更合理。

e) 大规模项目中可以减少用户下载

css框架的弊端。

a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。

b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。

c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。

d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。

常用的css框架:

960gs

960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。

YUI 2: Grids CSS

芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设模板。其中的负 Margin 技术，使用度量单位 em，清除布局浮动等技术非常值得学习和借鉴。

Blueprint

Blueprint 是一款成熟的 CSS 框架，它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在网页设计时就减少了引入的代码，提高了页面加载效率。

BlueTrip

BlueTrip 是一个集成了BluePrint & Tripoli 框架的做好的部分；Hartija 的打印样式； 960gs的简洁；Elements 图标的一个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的规则，它依然是组织样式的很好的主意。

SenCSS

它为你CSS重复的部分提供了合理的样式，这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样，它不包含各种杂乱的布局样式或是预定义的栅格系统，那SenCSs能刚什么呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的