重構：CSS也面向對象

最初接觸到面向對象的CSS仍是由於項目中的CSS已經超過八千行，缺少約束和管理，在近期或者是不遠的未來，有迫切的要求須要重構。在前端重構中，咱們已經討論過了JavaScript面向對象的重構，在這個時候再看一看CSS面向對象和模塊化，這給個人工做提供了很是好的思路。

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

 

咱們的CSS代碼遇到了什麼問題？

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

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

怕CSS重名，s一、s二、t一、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/的例子結尾：

/* **************** TEMPLATE ***************** */
/* ====== Page Head, Body, and Foot ====== */
body{/*_text-align:center;*/}/* IE5.5 */
.body{overflow:hidden; _overflow:visible; _zoom:1;}
.page{margin: 0 auto; width: 950px;/*_text-align:left;*/} /* wraps other template elems to set width */ /* text-align IE5.5 */
/* "old school" and "liquid" extend page to allow for different page widths */
.oldSchool{width:750px;}
.gs960{width:960px;}
.liquid{extends:.page; width: auto;margin:0;}
/* ====== Columns ====== */
.main{overflow: hidden;_overflow:visible;_zoom:1;}
.leftCol{float:left; width:250px;_margin-right:-3px;}
.rightCol{float:right; width: 300px;_margin-left:-3px;}
/* extend columns to allow for common column widths */
.gMail{width:160px;}
.gCal{width:180px;}
.yahoo{width:240px;}
.myYahoo{width:300px;}

/* **************** CONTENT OBJECTS ***************** */
/* ====== Default spacing ====== */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
/* ====== Elements ====== */
img{display:block;}
em{font-style: italic;}
strong{font-weight:bold;}
hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}
code{color:#0B8C8F;}
/* ====== Headings ====== */
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
.category a{color: #333;}
.important a{font-weight:bold;}
/* links */
a { color: #036; font-weight:bold;text-decoration: none }
a:focus, a:hover { text-decoration: underline }
a:visited { color:#005a9c; }
/* ====== Lists ======*/
/* numbered list */
ol.simpleList li{list-style-type: decimal; margin-left:40px;}
/* standard list */
ul.simpleList li{list-style-type:disc; margin-left:40px;}
/* ====== Tables ====== */
.data{padding: 20px; position:relative; zoom:1;vertical-align: top;border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/}
.data table {width:100%;border:1px solid #AE0345;}
th, td{vertical-align:top;border:1px solid #AE0345;}
.txtC, .data .txtC td, .data .txtC th{text-align:center;}
.txtL, .data .txtL td, .data .txtL th{text-align:left;}
.txtR, .data .txtR td, .data .txtR th{text-align:right;}
.txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
.txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
.txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
.data th,.data td{padding:3px 20px}
.data thead tr{#fff0f8;}
.data th{color: #000; font-weight:bold}