OO的CSS尝试

原创 2004年05月25日 10:28:00

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
 

OO的CSS尝试

OO的CSS尝试:面向对象的样式表实践美工和程序员如何合作? 我的答案是就靠这种规则的CSS 因为结构比较规则,所以可以通过固定的Taglib来生成table 但美工和程序员之间需要一个熟悉CSS...
  • techcrunch
  • techcrunch
  • 2008年04月09日 00:31
  • 219

SAP ABAP OO ALV 获取当前的alv事件 包括f4帮助,回车按钮,等其他全部按钮alv操作

*   获取当前事件      lv_enter = cl_gui_alv_grid=>CUR_EVENT.
  • forever_crazy
  • forever_crazy
  • 2014年02月14日 15:22
  • 1693

OO设计五大原则

OO的五大原则是指SRP、OCP、LSP、DIP、ISP 1. SRP(Single Responsibility Principle 单一职责原则)  单一职责很容易理解,所谓单一职...
  • u014117094
  • u014117094
  • 2015年07月08日 23:13
  • 846

oo编程

OO(Object-Oriented) 什么是OO? 就是面向接口编程。无论你是用vtable, 或gp的function object, 或就是C的函数指针,正交分解也好,各种pattern也罢,都...
  • jianxiong8814
  • jianxiong8814
  • 2007年05月19日 00:06
  • 2348

OO 编程基本功--(1)

OO编程基本功--(1)
  • csharp25
  • csharp25
  • 2014年08月18日 16:08
  • 1470

OO技术三大特点

面向对象(Object Oriented,缩写为OO)是现代软件技术的精髓。从早期的SmallTalk到如日中天的Java,都渗透着面向对象思想。 OO具有三大特性:封装性、继承性和多态性。想掌握...
  • wangjunwen1990
  • wangjunwen1990
  • 2015年11月22日 14:39
  • 649

PHPOO知识点总结

 面向对象:认识或认知事物的一种方法--->类比 对象是类进行实例化后的结果 object -->物质,事物 类 -->抽象:属性-->外观   行为-->做的事(默认情况下的是缺少了该属...
  • ailxxiaoli
  • ailxxiaoli
  • 2016年07月09日 20:43
  • 947

Python之OO 面向对象

Python之面向对象 在C++和Python中,都有面向对象的概念,但是两者有哪些重要的区别呢?用最简单的语言便是,C++把每一个用户(这里当然值的是使用代码的程序员)当做是潜在的可能的犯罪分...
  • C12345SDN
  • C12345SDN
  • 2014年12月07日 22:08
  • 1245

OO思想名词解释

复习 OOA、OOD、OOP  OOA   Object-Oriented Analysis:面向对象分析方法   是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想...
  • superdog007
  • superdog007
  • 2015年10月10日 10:48
  • 1386

OO,OO以后,及其极限

1、什么是软件开发?   软件开发的过程就是人们使用各种计算机语言将人们关心的现实世界映射到计算机世界的过程;   现在的计算机的数学理论基础是由计算机的开山鼻祖,大名鼎鼎的图灵于1937年提出的图灵...
  • gaofeng2000
  • gaofeng2000
  • 2004年07月21日 16:16
  • 1399
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:OO的CSS尝试
举报原因:
原因补充:

(最多只允许输入30个字)