CSS框架是我们在学习web开发过程中非常重要的内容，CSS框架的掌握是非常关键的，能够让网页增添更加的色彩，那么一个完美的CSS框架结构需要具备哪些特点呢？下面深圳北大青鸟为大家介绍CSS框架的具体内容。
一个完美的CSS框架并不是所有良好的软件开发目标都有很大的区别。
CSS框架也有很大的特点，CSS框架是可预测的、可重用的、可维护的和可扩展的。
1、可预测性可预测性的意思就是能够按照规则根据所预想的方法进行运行。
当进行添加或是更新一个方法的时候，不会影响站点里面的其他部分。
如果对站点进行小规模改变的时候，深圳计算机学院发现里面的内容都是不重要的，但是在进行多个或是八个页面站点修改是，CSS的可预测性就是非常必要的。
2、可重用性CSS中的规则能够充分抽象和去耦，你不需要对已经解决的模式和问题进行再编码，可以依靠现有的部分快速构建新的部件。
3、可维护性如果您需要在网站上添加、更新和重新配置新的组件和属性，那么您就不需要重新构建现有的CSS了。
深圳深圳IT培训建议只要将组件添加到页面中，不需要撤销组件的实例。
4、可扩展性随着网站规模和复杂性的不断增长，在很多情况下，深圳深圳java软件开发认为更多的开发人员需要进行维护。
可扩展的CSS意味着一个人或大型工程团队可以很容易地进行管理。
也就是说，网站的CSS大纲不需要大量的学习曲线，学习变得简单。
因为现在是CSS的开发者进行维持，所以不需要考虑今后的变更。
以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]-->
闲着没事，给你写一个吧！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 框架</title>
<style type="text/css">
body{text-align:centerfont:14px/1em Arial, Helvetica, sans-serif '宋体'}
*{margin:0padding:0}
.left{float:left}
.right{float:right}
.clear{clear:both}
.border{border:1px solid #888}
#wraper{margin:0 autowidth:850px}
#header{height:120pxposition:relativeborder:1px solid #888}
#header .logo{position:absolutetop:40pxleft:20pxwidth:120pxheight:50pxline-height:50pxtext-align:centertext-transform:uppercase}
#main{margin-top:5px}
#main .banner{height:60pxline-height:60px}
#main .box{margin-top:5pxwidth:49%height:250px}
#main .box h1{height:25pxline-height:25pxtext-indent:10pxfont-size:14pxborder-bottom:1px solid #888text-align:left}
#main .more{margin:5px auto 0 autowidth:80%height:15px}
#footer{margin-top:5pxheight:50pxline-height:50pxborder:1px solid #888}
</style>
</head>
<body>
<div id="wraper">
<div id="header"><div class="logo border">logo</div></div>
<div id="main">
<div class="banner border">Banner</div>
<div>
<div class="box border left"><h1>Title</h1></div>
<div class="box border right"><h1>Title</h1></div>
<div class="clear"></div>
</div>
<div class="more border"></div>
</div>
<div id="footer">footer</div>
</div>
</body></html>
