对OO思路的CSS尝试及一些使用CSS的经验

之前想到过用类似于面向对象的方法来做CSS，昨天搞了一晚上做了一个小例子。
做这个很有成就感，看到漂亮的东西从手中出来，很高兴。
不过到最后遇到了一个小问题，这个一会儿说，看谁有办法解决。

主要的设计思路是，例如对于某个类型的Table，在系统中肯定会出现多次，
因此把这种Table总结为一个CSS，而这些不同的CSS又有一些共性。

.sampleTable {
}
.sampleTable2 {
}

例如表头，数据行等等。因此做一个CSS模版，通过CSS属性继承的技巧来实现。

.sampleTable1 {
}
.sampleTable1 .menu{
}

.sampleTable2   {
}
.sampleTable2 menu {
}

附件里面是一个做好的CSS，嘿嘿，里面绝对有你没想到的效果。
这附件就算是这个Css模版的0.1版本吧，呵呵，还有不少东西需要改进。

针对这种写CSS的技巧我简单总结了几个如下：

1 尽量避免复写Tag( 形如 A {});，因为会导致同一Tag的其他class失效
2 对于text的一些修饰只能写在class本体中，对于:link等无效
3 border如果合并(collapse);是前面的压后面的，上面的压下面的，而且只对table和td有效。tr无效
4 为了写border，所有的td都加相同class
5 为了简化，可以去掉td中的span，把span的class写在td里面，但不建议这样写
6 如果想要用CSS切断多出的文字，需要附加新的class才行，而且要指定固定的长度
7 隔行颜色和行鼠标行为用expression来制作，列定义了四种，id列，主内容列，特殊列，其他列。估计一般够用吧
8 层次很重要，class应该仅出现同一层次
9 字号字体等在顶层table中定义，其他部分用em等相对大小来控制
10 可以考虑用script来附加class，不过我是希望尽量用CSS来控制一切(估计很难了);，当然，css也是可以附加script的，不过功能有限

昨天在最后的时候，我遇到了一个问题恨头疼：

 我使用expression来控制TR行的隔行同色，但是麻烦的是，
 如果我想在其中的TD中声明背景url，就会把IE搞死。
 例如icon这个class，我本来的意图是作象新闻列表前面那样的图标的
 你可以放一个css.gif在同目录下试试看，现在没有图片很正常
 谁有解决问题想法？我想通过js可能能解决掉。

问题已经解决，通过htc搞定

美工和程序员如何合作？ 我的答案是就靠这种规则的CSS
因为结构比较规则，所以可以通过固定的Taglib来生成table
美工可以对固定的css进行维护，不一定要会css,只要制作图片就好了。
当然这需要由一个精通css/script的人来做中间人来将图片和CSS做在一起

缺点也有，1是规则css失去了一点灵活性，2是增加了人力

这个才只对一个table作了模版，如果要应用，还需要做form等等的不同css
另外，由于上面的问题，估计纯css不用script的可能性不大

哪位对有兴趣可以和我MSN联系，如果认识其他CSS方面造诣深的朋友也希望介绍一下

补充，做这个的时候，完全忘记了HTC的存在
刚才被人提醒不能过多使用expression才想起来
现在问题已经解决了，呵呵，升级版本0.11

唉，思路走近死胡同了
这就是开源的好处，哈哈哈，一对人帮忙挑刺

稍微看了一下，有很多可以简化的。

噢~ 比如说哪~~ 洗耳恭听~

首先如果合理的使用id,那在页面里面很多时候不需要设置class="" ,其实一个页面不同体现css的优势，必须要多个页面才能体现重用。
下面一段：
－－－－－－－－－－－－
<thead>
  <tr class="menu">
    <td class="label">LABEL</th>
    <td class="label"><a href="#" class="text">LABEL LINK</a></th>
    <td class="label"><span class="text">LABEL SPAN</span></th>
  </tr>
  </thead>

改为：
<thead>
  <tr >
    <th >LABEL</th>
    <th><a href="#" class="text">LABEL LINK</a></th>
    <th>LABEL SPAN</th>
  </tr>
  </thead>

然后你再看看如何去改你的css,因为我觉得80％的页面里面
<tr class="menu">
是一样的，既然如此，那就不用在每个页面里面设定css,只对特殊的作设定。原则就是尽量在页面里面不设定class.

我开始是按照你的方法做的，也作了和class同样的版本
例如对应label 有th，实现一样
但我后面.label .text这种得，还得对应一个th .text，
如果有更多的那可就是双倍的增大。
后来考虑到这css是为了taglib生成的，
因此就去掉了 不过要是对menu这么做也还没啥问题i

我看到有人用script动态的把class 附加到table中的某些区域
这种方法可以考虑，能够把大部分固定的class省去。

对于id我了解不透，没觉得和class有什么大区别
给俺解释解释~

没有看出什么,工作量没有降低呀!!

你指得谁的工作量？
我的想法是，有了规则的css，可以用taglib来生成table
而只需要指定顶部元素

只是分类吧，没有看出OO的地方。

恩，OO的部分思路而已，继承和抽象

继承，就是CSS的class继承了父class的属性如.table .label
抽象，就是按照实际功能抽象为一个可描述的名字，如.menu

在应用的时候，上面的.table .label .menu等等，可以看作是接口
不同的css实现相同的接口。如.table1 .table2，都应该有.label .ment

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

所以，我说是OO的CSS不为过吧