重構：CSS也面向對象

2024-04-27 14:33:56

字體：大中小

來源：轉載

供稿：網友

重構：CSS也面向對象

最初接觸到面向對象的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/的例子結尾：

Css代碼

/*****************TEMPLATE******************/
/*======PageHead,Body,andFoot======*/
body{/*_text-align:center;*/}/*IE5.5*/
.body{overflow:hidden;_overflow:visible;_zoom:1;}
.page{margin:0auto;width:950px;/*_text-align:left;*/}/*wrapsothertemplateelemstosetwidth*//*text-alignIE5.5*/
/*"oldschool"and"liquid"extendpagetoallowfordifferentpagewidths*/
.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;}
/*extendcolumnstoallowforcommoncolumnwidths*/
.Gmail{width:160px;}
.gCal{width:180px;}
.yahoo{width:240px;}
.myYahoo{width:300px;}
/*****************CONTENTOBJECTS******************/
/*======Defaultspacing======*/
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;}
tableh1,tableh2,tableh3,tableh4,tableh5,tableh6,tablep,tableul,tableol,tabledl{padding:0;}
/*======Elements======*/
img{display:block;}
em{font-style:italic;}
strong{font-weight:bold;}
hr{border:5pxsolid#e2e2e2;border-width:005px0;margin:20px10px10px10px;}
code{color:#0B8C8F;}
/*======Headings======*/
/*.h1-.h6classesshouldbeusedtomaintainthesemanticallyappropriateheadinglevels-NOTforuSEOnnon-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;}
/*ifadditionalheadingsareneededtheyshouldbecreatedviaadditionalclasses,nevervialocationdependantstyling*/
.category{font-size:108%;font-weight:normal;font-style:normal;text-transform:uppercase;color:#333;}
.categorya{color:#333;}
.importanta{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======*/
/*numberedlist*/
ol.simpleListli{list-style-type:decimal;margin-left:40px;}
/*standardlist*/
ul.simpleListli{list-style-type:disc;margin-left:40px;}
/*======Tables======*/
.data{padding:20px;position:relative;zoom:1;vertical-align:top;border-right:solid1pxtransparent;/*borderfixesaFF2bugwhichcausesthedatatabletooverlayitsborders*/}
.datatable{width:100%;border:1pxsolid#AE0345;}
th,td{vertical-align:top;border:1pxsolid#AE0345;}
.txtC,.data.txtCtd,.data.txtCth{text-align:center;}
.txtL,.data.txtLtd,.data.txtLth{text-align:left;}
.txtR,.data.txtRtd,.data.txtRth{text-align:right;}
.txtT,.data.txtTtd,.data.txtTth{vertical-align:top;}
.txtB,.data.txtBtd,.data.txtBth{vertical-align:bottom;}
.txtM,.data.txtMtd,.data.txtMth{vertical-align:middle;}
.datath,.datatd{padding:3px20px}
.datatheadtr{#fff0f8;}
.datath{color:#000;font-weight:bold}