日期:2014-05-16  浏览次数:20597 次

CSS模块化(八) 流行的前端框架

8. CSS框架部分

8.1 产生的原因

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

8.2 CSS框架定义

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

8.3 特征

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

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

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

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

8.4 优缺点

优点

a) 提高开发效率。

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

c) 规范项目开发流程

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

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

弊端

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

b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。自己编写CSS框架很重要的一点就是组件复用性的考量

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

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

8.5 常用css框架

960gs,YUI 2: Grids CSS,渴切-开源中文css框架,Blueprint,BlueTrip,Bootstrap,Elastic CSS,Easy,EZ-CSS,Tripoli,CleverCSS,SenCSS

8.6 Bootstrap

BootstrapTwitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark OttoJacob Thornton合作开发,是一个CSS/HTML框架。它是一款简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。其自带的js