什么是css框架 css框架优缺点

html-css018

什么是css框架 css框架优缺点,第1张

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

优点

a) 提高开发效率。

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

c) 规范项目开发流程

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

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

弊端

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

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

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

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

精致的 CSS UI 框架：

1、Bootstrap – 最流行的Web前端UI框架

2、jQuery UI - 基于jQuery的开源Javascript框架

3、jQuery UI Bootstrap

4、BootMetro - Metro风格的CSS框架

5、Flat UI - 扁平风格 UI 工具包

6、网易CSS框架 NEC

7、Alloy UI – 功能强大的CSS UI框架

8、Cardinal – 移动端的CSS UI框架

9、快速开发CSS的框架 CSScaffold

10、后台UI开发框架 MuseUI

以pure为例来说明css框架的使用方法:

第一步：

设置meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0maximum-scale=1.0user-scalable=0" />

第二步：

引用基础css，就是说，所有引用pure的代码之前，需要引入的一个css

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/base-min.css">

第三步：

引用pure的主css

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/pure-min.css">

第四步：

引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局：

<!--[if lte IE 8]>

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">

<![endif]-->

<!--[if gt IE 8]><!-->

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">

<!--<![endif]-->