最初接觸到面向對象的CSS還是因為項目中的CSS已經超過八千行，缺乏約束和管理，在近期或者是不遠的將來，有迫切的要求需要重構。在前端重構中，我們已經討論過了javaScript面向對象的重構，在這個時候再看一看CSS面向對象和模塊化，這給我的工作提供了非常好的思路。

首先，我要說的是，在這個概念翻飛的年代里，固執地追求某些概念和涵義，并不能帶來更優秀的設計和更高的生產力，面向對象是一種思路，或者說是一種方法論，給CSS重構帶來一些啟示，這就足夠了，沒有必要去糾結OO CSS的定義和嚴謹性。

我們的CSS代碼遇到了什么問題？

重用性差，看著一個CSS的名稱，很難說出哪些模塊可能引用到了它，這個CSS是用作網頁的哪些部分的；

結果誰也不敢修改和刪除，后面的樣式只能往上面堆積；

怕CSS重名，s1、s2、t1、t2這樣的命名開始出現了，這無異于飲鴆止渴，沒有人知道這些樣式是做什么的；

于是，CSS越來越大了；

做高保真的美工和業務開發人員思路是完全不同的，我們看到各種風格的CSS定義和命名；

有時候，也會遇到CSS沖突的問題，這一切，還是歸結為那一句話：復雜是一切軟件問題的根源。

CSS重構的原則：

縱向模塊化：由大到小建立CSS模塊文件，比如：公用 -> 門戶 -> 頻道 -> 欄目 -> 內容；

橫向模塊化：適用于一些獨立性高的組件，比如播放器模塊、彈出層模塊；

提供指導性CSS：例如，準備幾套list類型展示的樣式，把整個系統中的list展示全部收攏到這一處來，未來皮膚的更換、比較和修改，相當程度上便利了美工；

CSS的拇指原則：如果同一功能區域的兩個樣式很相近，只保留一個！

框架（欄目）用網格來控制寬度，而內容控制高度，當頁面上由若干個欄目組成，每個欄目的寬度可以固定或者被頻道按比例固定，但是高度需要取決于內容。

CSS的規則定下來以后，需要開源和節流兩個角度去控制與管理，一方面，新加入的CSS必須按照規則行事，這點需要給高保真設計人員和業務開發人員提要求；另一方面，原有CSS需要進行逐步的重構。

CSS本身是支持繼承和模塊化的，另外在HTML頁面上，也可以比較容易地做到樣式和擴展樣式的使用，比如：《div class="player wmpPlayer"》。

如果有一天，項目的前端復雜到了需要對HTML也做UML建模的時候，那么把CSS也放進去吧。DOM和其附屬、關聯模型，本身就是很適合做建模的。

最后以http://oocss.org/的例子結尾：

1. /*****************TEMPLATE******************/
2. /*======PageHead,Body,andFoot======*/
3. body{/*_text-align:center;*/}/*IE5.5*/
4. .body{overflow:hidden;_overflow:visible;_zoom:1;}
5. .page{margin:0auto;width:950px;/*_text-align:left;*/}/*wrapsothertemplateelemstosetwidth*//*text-alignIE5.5*/
6. /*"oldschool"and"liquid"extendpagetoallowfordifferentpagewidths*/
7. .oldSchool{width:750px;}
8. .gs960{width:960px;}
9. .liquid{extends:.page;width:auto;margin:0;}
10. /*======Columns======*/
11. .main{overflow:hidden;_overflow:visible;_zoom:1;}
12. .leftCol{float:left;width:250px;_margin-right:-3px;}
13. .rightCol{float:right;width:300px;_margin-left:-3px;}
14. /*extendcolumnstoallowforcommoncolumnwidths*/
15. .Gmail{width:160px;}
16. .gCal{width:180px;}
17. .yahoo{width:240px;}
18. .myYahoo{width:300px;}
20. /*****************CONTENTOBJECTS******************/
21. /*======Defaultspacing======*/
22. h1,h2,h3,h4,h5,h6,ul,ol,dl,p,blockquote{padding:10px;}
23. h1,h2,h3,h4,h5,h6,img{padding-bottom:0px;}
24. PRe{margin:10px;}
25. tableh1,tableh2,tableh3,tableh4,tableh5,tableh6,tablep,tableul,tableol,tabledl{padding:0;}
26. /*======Elements======*/
27. img{display:block;}
28. em{font-style:italic;}
29. strong{font-weight:bold;}
30. hr{border:5pxsolid#e2e2e2;border-width:005px0;margin:20px10px10px10px;}
31. code{color:#0B8C8F;}
32. /*======Headings======*/
33. /*.h1-.h6classesshouldbeusedtomaintainthesemanticallyappropriateheadinglevels-NOTforuSEOnnon-headings*/
34. h1,.h1{font-size:196%;font-weight:normal;font-style:normal;color:#AE0345;}
35. h2,.h2{font-size:167%;font-weight:normal;font-style:normal;color:#AE0345;}
36. h3,.h3{font-size:146.5%;font-weight:normal;font-style:normal;color:#DF2B72;}
37. h4,.h4{font-size:123.1%;font-weight:normal;font-style:normal;color:#333;}
38. h5,.h5{font-size:108%;font-weight:bold;font-style:normal;color:#AE0345;}
39. h6,.h6{font-size:108%;font-weight:normal;font-style:italic;color:#333;}
40. /*ifadditionalheadingsareneededtheyshouldbecreatedviaadditionalclasses,nevervialocationdependantstyling*/
41. .category{font-size:108%;font-weight:normal;font-style:normal;text-transform:uppercase;color:#333;}
42. .categorya{color:#333;}
43. .importanta{font-weight:bold;}
44. /*links*/
45. a{color:#036;font-weight:bold;text-decoration:none}
46. a:focus,a:hover{text-decoration:underline}
47. a:visited{color:#005a9c;}
48. /*======Lists======*/
49. /*numberedlist*/
50. ol.simpleListli{list-style-type:decimal;margin-left:40px;}
51. /*standardlist*/
52. ul.simpleListli{list-style-type:disc;margin-left:40px;}
53. /*======Tables======*/
54. .data{padding:20px;position:relative;zoom:1;vertical-align:top;border-right:solid1pxtransparent;/*borderfixesaFF2bugwhichcausesthedatatabletooverlayitsborders*/}
55. .datatable{width:100%;border:1pxsolid#AE0345;}
56. th,td{vertical-align:top;border:1pxsolid#AE0345;}
57. .txtC,.data.txtCtd,.data.txtCth{text-align:center;}
58. .txtL,.data.txtLtd,.data.txtLth{text-align:left;}
59. .txtR,.data.txtRtd,.data.txtRth{text-align:right;}
60. .txtT,.data.txtTtd,.data.txtTth{vertical-align:top;}
61. .txtB,.data.txtBtd,.data.txtBth{vertical-align:bottom;}
62. .txtM,.data.txtMtd,.data.txtMth{vertical-align:middle;}
63. .datath,.datatd{padding:3px20px}
64. .datatheadtr{#fff0f8;}
65. .datath{color:#000;font-weight:bold}