Refactoring: CSS is also object-oriented

The initial exposure to object-oriented CSS is due to the fact that there are more than 8,000 lines of CSS in the project, lack of constraints and management, and there is a compelling need for refactoring in the near future or not far away. In front-end refactoring, we've talked about JavaScript object-oriented refactoring, and at this point look at CSS object-oriented and modular, which gives me a very good idea of the job.

First of all, I would like to say that in this era of the concept of flying, stubbornly pursue certain concepts and meanings, does not lead to better design and higher productivity, object-oriented is a way of thinking, or a methodology, to bring some inspiration to the CSS refactoring, which is enough, there is no need to tangle Oo The definition and rigor of CSS.

What's wrong with our CSS code?

Reusability is poor, look at a CSS name, it is difficult to say which modules may be referenced to it, which CSS is used as part of the Web page;

As a result, no one dared to modify and delete, the latter style only stacked on top;

Afraid of CSS duplicate name, s1, S2, T1, T2 such naming began to appear, this is tantamount to quench thirst, no one knows what these styles are doing;

As a result, the CSS is getting bigger;

The idea of doing hi-fidelity artwork and business developers is completely different, and we see CSS definitions and naming of various styles;

Sometimes, you will encounter CSS conflicts, all this, or it boils down to that sentence: complexity is the root of all software problems.

The principle of CSS refactoring:

Vertical modularity: From large to small set up CSS module files, such as: public----portal-----------content;

Horizontal modularity: Suitable for a number of high-independence components, such as player module, pop-up layer module;

Provide instructional CSS: for example, to prepare several sets of list type display style, the whole system of the list display all collapsed to this place, the future skin replacement, comparison and modification, to a considerable extent to facilitate the art;

CSS Thumb principle: If the two styles in the same functional area are similar, keep only one!

The frame (column) uses the grid to control the width, while the content control height, when the page is composed of several columns, each column width can be fixed or fixed by the channel, but the height needs to depend on the content.

CSS rules are fixed, need to open source and throttling two angles to control and management, on the one hand, the new CSS must follow the rules, this need to the high-fidelity designers and business developers to request, on the other hand, the original CSS needs to be gradually reconstructed.

CSS itself is to support inheritance and modularity, in addition to the HTML page, it can be easier to do the style and extension of the use of style, such as: "Div class=" Player Wmpplayer ".

If one day, the front end of the project is complicated to need to do UML modeling for HTML, then put the CSS in it. The DOM and its affiliated and associated models are inherently good for modeling.

Finally end with the example of http://oocss.org/:

CSS Code

2. /* **************** TEMPLATE ***************** */
4. /* ====== Page Head, Body, and Foot ====== */
6. body{/*_text-align:center;*/}/* IE5. 5 * /
8. . Body{overflow:hidden; _overflow:visible; _zoom:1;}
10. . Page{margin: 0 auto; width:950px;/*_text-align:left;*/}/* Wraps other template elems to set width */* text-align IE5. 5 * /
12. /* "old school" and "liquid" extend page to allow for different page widths * /
14. . oldschool{width:750px;}
16. . gs960{width:960px;}
18. . liquid{extends:.page; Width:auto;margin:0;}
20. /* ====== Columns ====== */
22. . Main{overflow:hidden;_overflow:visible;_zoom:1;}
24. . leftcol{float:left; width:250px;_margin-right:-3px;}
26. . rightcol{float:right; width:300px;_margin-left:-3px;}
28. /* Extend columns to allow for common column widths */
30. . gmail{width:160px;}
32. . gcal{width:180px;}
34. . yahoo{width:240px;}
36. . myyahoo{width:300px;}
40. /* **************** CONTENT OBJECTS ***************** */
42. /* ====== Default spacing ====== */
44. H1, H2, H3, H4, H5, H6, UL, Ol,dl, p,blockquote {padding:10px;}
46. H1, H2, H3, H4, H5, h6,img{padding-bottom:0px;}
48. pre{margin:10px;}
50. Table h1,table h2,table H3, table H4, table H5, table H6, table P, table UL, table ol, table dl{padding:0;}
52. /* ====== Elements ====== */
54. Img{display:block;}
56. Em{font-style:italic;}
58. Strong{font-weight:bold;}
60. hr{border:5px solid #e2e2e2; Border-width: 0 0 5px 0; margin:20px 10px 10px 10px;}
62. Code{color: #0B8C8F;}
64. /* ====== headings ====== */
66. /* H1-.H6 classes should is used to maintain the semantically appropriate heading Levels-not for use on Non-headings */
68. H1,. H1{font-size:196%; font-weight:normal; font-style:normal; color: #AE0345;}
70. H2,. H2{font-size:167%; font-weight:normal; font-style:normal; color: #AE0345;}
72. H3,. H3{font-size:146.5%; font-weight:normal; font-style:normal; color: #DF2B72;}
74. H4,. H4{font-size:123.1%; font-weight:normal; font-style:normal; color: #333;}
76. H5,. H5{font-size:108%; font-weight:bold; font-style:normal; color: #AE0345;}
78. H6,. H6{font-size:108%; font-weight:normal; font-style:italic; color:#333;}
80. /* If additional headings is needed they should is created via additional classes, never via location dependant styling * /
82. . category{font-size:108%; font-weight:normal; font-style:normal; text-transform:uppercase; color: #333;}
84. . Category A{color: #333;}
86. . important A{font-weight:bold;}
88. /* Links */
90. A {color: #036; Font-weight:bold;text-decoration:none}
92. A:focus, a:hover {text-decoration:underline}
94. a:visited {color: #005a9c;}
96. /* ====== Lists ======*/
98. /* Numbered list */
100. Ol.simplelist li{list-style-type:decimal; margin-left:40px;}
102. /* Standard list */
104. Ul.simplelist li{list-style-type:disc; margin-left:40px;}
106. /* ====== Tables ====== */
108. . 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*/}
110. . data Table {width:100%;border:1px solid #AE0345;}
112. Th, td{vertical-align:top;border:1px solid #AE0345;}
114. . TXTC,. Data. TXTC TD,. Data. TXTC Th{text-align:center;}
116. . TXTL,. Data. TXTL TD,. Data. TXTL Th{text-align:left;}
118. . TXTR,. Data. txtr TD,. Data. txtr Th{text-align:right;}
120. . TXTT,. Data. txtt TD,. Data. Txtt Th{vertical-align:top;}
122. . TXTB,. Data. TXTB TD,. Data. TXTB Th{vertical-align:bottom;}
124. . TXTM,. Data. TXTM TD,. Data. Txtm Th{vertical-align:middle;}
126. . Data Th,.data td{padding:3px 20px}
128. . Data thead tr{#fff0f8;}
130. . Data th{color: #Font-weight:bold}