重构：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}
