对于如今的软件开发人员来说，各类五花八门的框架是满天飞，尤其是web开发领域，RoR、Spring、Struts、Zend等等，但要说到CSS框架，知道的人并不多，CSS也有框架吗？有，而且对web开发人员非常有帮助。
随 着Web UI Designer慢慢抛弃传统的table架构，转而纷纷采用xhtml+div+css模式，css的重要性也是与日俱增，往往会占去一个web项目中 一部分较大的工作量。而且时常会遇到各种浏览器兼容的问题，在ie上看起来很美观的页面，放到firefox下浏览却会出现错位等等这类问题。如何有效的 提高开发人员的效率，同时尽可能的解决浏览器兼容问题，于是有了CSS Framework。
什么是CSS框架
- 框架是个概念性很强的名词，对于CSS来说，所谓的框架就是一些预先定义了全局style重置、一致style设置、form style设置的css文件，这样当启动一个新项目时，可以直接拿来就用，在这些文件的基础上做修改就可以了。
- CSS框架没必要太复杂和庞大，一般就是以下这几个文件差不多：
- typography.css 字体修饰
- grid.css 表格修饰
- layout.css页面布局修饰
- form.css 表单修饰
- general.css 一些常用修饰，如reset修饰等等
使用CSS框架的好处
- 提高了生产效率并可以避免一些常见的错误。
- 规范化CSS和HTML代码，如在类似的项目HTML元素都使用相同的IDs和class names。
- 更加规范了项目流程，如果CSS框架整理了相应的文档，在UI上面一个Team里面的沟通会更加容易。
- 提高了浏览器兼容性。
- 你的代码将显得更加清晰、简单、完整以及合理的结构和可读性。
使用CSS框架的坏处
- 你需要理解整个框架
- 可能也会引入这个框架本身自带的bug和错误
- 太依赖于框架，以致对CSS的本质反而不是很了解
- 源代码相对会比较庞大，因为框架中很多代码可能是你用不到的
CSS框架推荐
标准的xhtml主要以div+css来实现页面布局和style修饰。这类架构往往需要写比较多的styles，这样的结果导致css文件会很大，本文讨论的是一些缩小css文件大小的技巧。
注释
如果css文件中一些注释是必须不能去掉的，则尽量写的简单一些。如下的注释：
/*———————-*/
/*—–Comment—–*/
/*———————-*/
可以简化成：
/*Comment*/
同时尽量去掉多于的空格。
颜色定义
如下的颜色定义：
color: #000000;
color: #dd44ff;
可以简化成:
color:#000;
color:#d4f;
margin、padding多行定义写成一行
如：
Padding-left:10px;
padding-right:20px;
padding-top: 0;
padding-bottom:30px;
简写成：
Padding: 0 20px 30px 10px;
又或者：
padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;
可以简写成：
Padding:10px 0;
0px可以去掉后面的px
如Padding: 10px 0px 0px 0px;可以写成：Padding: 10px 0 0 0;
合理的定义id和class
尤其是class，如果定义的合理，可以很好的重用。
对于不同元素的相同定义可以连起来定义
如：
h1{
margin:0;
padding:0;
}
h2{
margin:0;
padding:0;
}
h3{
margin:0;
padding:0;
}
可以写成：
h1, h2, h3{
margin:0;
padding:0;
}
最后一点，借助工具来压缩你的css文件
如去掉空格、分行和注释等等。推荐一个csscompressor。
position:fixed做为CSS2规范中的一项，可以让元素相对于屏幕来定位，而不是相对于网页，比如有一些网页元素需要始终停留在屏幕上 的某个位置，而不是随着页面滚动而位置变动，这个时候这项特性是非常有用的，但这项特性却不被ie支持，以下是一些实现这种效果的变相方式，基本上在所有 主流浏览器中都适合。最简单是把修饰元素的position改为absolute，然后在css中加上以下style：
html, body {
height: 100%; overflow: auto;
}
更多参考文章：
Tags: CSS.