关于CSS 框架的一点思考

关于CSS 框架的一点思考

 

下午上网随手搜了搜CSS的东西。又看到了“CSS 框架”这个词。06年早些的时候就听人说起过CSS Framework，那时候前端刚入门，烂人一个，也没多去关心。

近来自己也在研究这个东西，于是想写点什么

下午又搜了下以前看过的几篇关于CSS 框架的文章，举例如下几则

【1】段正淳的css笔记(6)-浅谈css框架开发

【2】CSS框架的利与弊

【3】A CSS Framework

【4】My CSS Framework

看得出，现在界内对CSS 框架的讨论还在继续。有的人说这东西应该被发展推广，有的人说这东西本什么没用，适用范围小。

争论的理论与实际基础很明确，就是CSS 框架的利弊导致的

利 ，总结下其他文章里的观点：

a) 更高的项目开发效率。
b) 更规范代码命名，便于掌握及维护。
c) 更好的团队合作，提升产品质量和工作效率。
d) 更好的解决浏览器的兼容性问题。
e) 更简洁的HTML，更严禁、清晰的CSS。

弊 ：

a) 前期学习成本高。你要阅读整个开发文档，了解整个框架的面向特点。
b) 继承未知错误的隐患。框架本身可能存在的BUG，或框架元素属性可能导致你后续开发部分中产生BUG。
c)冗余代码问题。框架中的代码你不可能全都用的到，尤其是一些小型站点使用一个比较完善的框架，冗余会很多。
d) 选择框架的时间成本提升。选择适合于自己的框架以及后期的框架改写上，会蛮郁闷。
e)对HTML语义化的牺牲，调用固定ID或class很难保证不同功能页的HTML语义化明确。

稍加分析我们会发现，框架的利主要是针对项目开发的TEAM而言；而弊端，则是针对其他使用此框架的项目TEAM。

CSS 框架和YUI、JQuery、Prototype这些JS框架最大的不同之处在于：CSS 框架很大程度上只适用于同一项目内，尤其对于重合度高、各个页面结合的比较紧密的网站而言，CSS 框架是首选。一旦这个CSS 框架出了这个项目的范围，对于其他项目而言，很可能就没甚价值。JS框架这点上和CSS 框架很不同。

CSS服务于为XHTML的结构提供表现，不同的项目有不同的XHTML结构。服务于某个项目的CSS 框架在这个前提面前，它山之石，似乎也难攻玉。

通用的CSS初始设置，到是可以将一些需要设置的元素单独提取出来进行，并定义几个常用的类或ID，有一定的普遍应用市场。比如我自己的

html {}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins{margin: 0px;padding: 0px;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ol,ul{list-style-type: none;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
table{border-collapse:collapse;}
fieldset,img{border:0;}
caption,th{text-align:left;}
body{position: relative;font-size:62.5%;font-family: “宋体”}
a{text-decoration: none;}
.middle{margin: 0 auto;}
.contain {width: ？px;overflow: hidden;}
.clear{clear:both;}
.none {display:none;}
/*–以上为元素初始值设置–*/

有朋友在致力于开发一套能满足多数人需要的CSS 框架，使其在小的修改情况下可以满足自身需要。但这样子的也仅能局限于一个轻量级框架的方位，只能满足于一般的基本布局。框架越健壮，其面向的范围会越窄，对于越多的项目而言，它就越显得臃肿。

网站项目的特殊性决定，对于复杂站点的框架，最好由其团队具体开发一个健壮的自用。

鉴于此，对于框架的交流，我认为最好转向于分享框架开发的流程及分块、顺序标准，以及开发中应该留意的问题和经验。

比如，CSS 框架中的功能分类、开发顺序、命名规范等

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。以节约代码量。

当然，也有见到按照页面构成分类的

a) 全局顶部 header.css

b) 全局 底部 footer.css

c) 侧边栏 sidebar.css

d) 主体显示 main.css

e) 广告 ad.css

f) 打印 print.css

g) 其他的css

今天和朋友聊起CSS 框架，我说，真要弄个像框架似的东西，不如弄的像个拼图的，XHTML、CSS、JS一起写，弄出一堆局部的模型，真做项目的时候，选需要的拼上去，小改改就成了。

前端拼图？呵呵

css js都分成小块 然后在把公用的压缩到一个文件里面…..朋友说海内这个东西搞的不错。

暂时写这么多，后期如有需要补充或修改之处，将会做修改。希望各路朋友一起讨论，群众的智慧是无穷的。