OO的CSS尝试

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

OO的CSS尝试:面向对象的样式表实践

美工和程序员如何合作? 我的答案是就靠这种规则的CSS

因为结构比较规则,所以可以通过固定的Taglib来生成table

但美工和程序员之间需要一个熟悉CSS/Scritpt的web程序员

之前想到过用类似于面向对象的方法来做CSS,主要的设计思路如下

对于某种类型的Table,在系统中肯定会出现多次,

例如用于显示新闻的,显示公告的等等。

因此把这种Table总结为一个CSS,而这些不同的CSS又有一些共性。

代码:

sampleTable.css

.sampleTable {

}

sampleTable2.css

.sampleTable2 {

}

例如表头,数据行等等,很多元素都相同。

因此做一个CSS模版,通过CSS属性继承的技巧来实现。

代码:

.sampleTable1 {

}

.sampleTable1 tbody .text{

}

.sampleTable2 {

}

.sampleTable2 tbody .text {

}

为什么说是OO的CSS呢?

因为这个CSS借鉴了OO的部分思路,继承,抽象和多态

继承,就是CSS的class继承了父class的属性如.table tbody

抽象,就是按照实际功能抽象为一个可描述的名字,如.text

在应用的时候,上面的.table .label .menu等等,可以看作是接口

不同的css实现相同的接口。如.table1 .table2,都应该有.label .ment

一个<TABLE class="table1">,可以看作是.table1这个接口的一个对象,

是吧,这个对象也可能是table2的对象,

但他们都是实现了.table这个接口。

table对不同接口的实现,就是OO中的多态。

那么,这样做的好处是什么?

首先,你得到了一个干净的table,没有多余的颜色格式信息

第二,这个表格是规则的,你可以通过taglib等模版自动生成

第三,更换一个class很简单,只需要改动一处,不需要修改td等元素

第四,更好的组织css,将css按照颜色或功能分为多个文件

代码位于:http://icecloud.51.net

现在我只实现了一个table的0.12版本

有兴趣的朋友不妨一起来做这个OO-CSS项目 :>

版权声明:

本文由冰云完成,作者保留中文版权。

未经许可,不得使用于任何商业用途。

欢迎转载,但请保持文章及版权声明完整。

如需联络请发邮件:icecloud(AT)sina.com

Blog:http://icecloud.51.net

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航