Refactoring: CSS is also object-oriented_html/css_WEB-ITnose

I first came into contact with object-oriented CSS because the CSS in the project has exceeded 8,000 lines and lacks constraints and management. In the near future or in the near future, there are urgent requirements for reconstruction. In the front-end refactoring, we have already discussed the object-oriented refactoring of JavaScript. At this time, let's take a look at CSS object-oriented and modularity, which provides a very good idea for my work.

First of all, what I want to say is that in this era of turbulent concepts, stubborn pursuit of certain concepts and meanings will not lead to better design and higher productivity. Object-oriented is a This idea, or a methodology, brings some inspiration to CSS reconstruction. This is enough. There is no need to worry about the definition and rigor of OO CSS.

What problem did our CSS code encounter?

The reusability is poor. Looking at the name of a CSS, it is difficult to tell which modules may reference it and which parts of the web page this CSS is used for;

As a result, no one dares to modify and Delete, the following styles can only be piled on top;

Afraid of duplicate CSS names, names like s1, s2, t1, and t2 began to appear. This is tantamount to drinking poison to quench thirst. No one knows what these styles do. ;

As a result, CSS is getting bigger and bigger;

The ideas of high-fidelity artists and business developers are completely different. We see various styles of CSS definitions and naming;

Sometimes, you will also encounter the problem of CSS conflict. It all boils down to that sentence: Complexity is the root of all software problems.

Principles of CSS reconstruction:

Vertical modularization: Create CSS module files from large to small, such as: Public-> Portal-> Channel-> Column-> Content ;

Horizontal modularization: suitable for some highly independent components, such as player modules and pop-up layer modules;

Provide guiding CSS: for example, prepare several sets of styles for list type display , all the list displays in the entire system are gathered into this place. The replacement, comparison and modification of future skins will greatly facilitate the artist;

CSS thumb principle: If two of the same functional areas The styles are very similar, only one is kept!

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

After the rules of CSS are set, they need to be controlled and managed from the perspectives of open source and cost reduction. On the one hand, newly added CSS must act in accordance with the rules. This needs to be given to high-fidelity designers and business developers. Make requirements; on the other hand, the original CSS needs to be gradually reconstructed.

CSS itself supports inheritance and modularization. In addition, on HTML pages, it is easier to use styles and extended styles, such as: "div class="player wmpPlayer"".

If one day, the front-end of the project becomes so complex that UML modeling is required for HTML, then put CSS in it too. DOM and its affiliated and associated models are very suitable for modeling.

Finally ends with the example from http://oocss.org/:

Css code

1. /* **************** TEMPLATE ***************** */   
2. /* ====== Page Head, Body, and Foot ====== */   
3. body{/*_text-align:center;*/}/* IE5.5 */   
4. .body{overflow:hidden; _overflow:visible; _zoom:1;}   
5. .page{margin: 0 auto; width: 950px;/*_text-align:left;*/} /* wraps other template elems to set width */ /* text-align IE5.5 */   
6. /* "old school" and "liquid" extend page to allow for different page widths */   
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. /* extend columns to allow for common column widths */   
15. .gMail{width:160px;}   
16. .gCal{width:180px;}   
17. .yahoo{width:240px;}   
18. .myYahoo{width:300px;}  
19.   
20. /* **************** CONTENT OBJECTS ***************** */   
21. /* ====== Default spacing ====== */   
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. table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}   
26. /* ====== Elements ====== */   
27. img{display:block;}   
28. em{font-style: italic;}   
29. strong{font-weight:bold;}   
30. hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}   
31. code{color:#0B8C8F;}   
32. /* ====== Headings ====== */   
33. /* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-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. /* if additional headings are needed they should be created via additional classes, never via location dependant styling */   
41. .category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}   
42. .category a{color: #333;}   
43. .important a{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. /* numbered list */   
50. ol.simpleList li{list-style-type: decimal; margin-left:40px;}   
51. /* standard list */   
52. ul.simpleList li{list-style-type:disc; margin-left:40px;}   
53. /* ====== Tables ====== */   
54. .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*/}   
55. .data table {width:100%;border:1px solid #AE0345;}   
56. th, td{vertical-align:top;border:1px solid #AE0345;}   
57. .txtC, .data .txtC td, .data .txtC th{text-align:center;}   
58. .txtL, .data .txtL td, .data .txtL th{text-align:left;}   
59. .txtR, .data .txtR td, .data .txtR th{text-align:right;}   
60. .txtT, .data .txtT td, .data .txtT th{vertical-align:top;}   
61. .txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}   
62. .txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}   
63. .data th,.data td{padding:3px 20px}   
64. .data thead tr{#fff0f8;}   
65. .data th{color: #000; font-weight:bold}