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对不同接口的实现，就是OO中的多态。

那么，这样做的好处是什么？

首先，你得到了一个干净的table，没有多余的颜色格式信息第二，这个表格是规则的，你可以通过taglib等模版自动生成第三，更换一个class很简单，只需要改动一处，不需要修改td等元素第四，更好的组织css，将css按照颜色或功能分为多个文件

代码位于：

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

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

    

，可以看作是.table1这个接口的一个对象， 是吧，这个对象也可能是table2的对象， 但他们都是实现了.table这个接口。

版权声明： 本文由冰云完成，作者保留中文版权。 未经许可，不得使用于任何商业用途。 欢迎转载，但请保持文章及版权声明完整。 如需联络请发邮件：icecloud(AT)sina.com Blog：