OO的CSS嘗試

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