リファクタリング: CSS もオブジェクト指向_html/css_WEB-ITnose

私がオブジェクト指向 CSS に出会ったのは、プロジェクト内の CSS が 8,000 行を超え、制約や管理が不足しており、近い将来、または近い将来、早急に再構築する必要があるためです。フロントエンドのリファクタリングでは、JavaScript のオブジェクト指向のリファクタリングについてすでに説明しました。今回は、私の仕事に非常に良いアイデアを提供する CSS のオブジェクト指向とモジュール化について見てみましょう。

まず第一に、私が言いたいのは、この激動の概念の時代において、特定の概念や意味を頑固に追求するだけでは、より良いデザインやより高い生産性は得られない、ということです。オブジェクト指向は一つの考え方であり、それだけで十分です。これは、CSS の再構築にインスピレーションをもたらす方法論であると言えます。OO CSS の定義や厳密性について心配する必要はありません。

CSS コードでどのような問題が発生しましたか?

CSS の名前を見ただけでは、どのモジュールがそれを参照しているのか、またこの CSS が Web ページのどの部分に使用されているのかを判断するのは困難です

そのため、誰も変更や削除をしようとはしません。 、その後のスタイルは

しかありません。CSS 名が重複するのを恐れて、s1、s2、t1、t2 などの名前が登場し始めました。これは、これらのスタイルが何をするのか誰も知りません。 、CSS はますます大きくなっています ;

ハイファイ アーティストとビジネス開発者の考え方はまったく異なります。CSS の定義と命名にはさまざまなスタイルがあります。

場合によっては、CSS の競合も発生します。文: 複雑さはすべてのソフトウェア問題の根源です。

CSS 再構築の原則:

垂直モジュール化: 次のような CSS モジュール ファイルを作成します。

水平モジュール化: 一部の場合に適用可能プレーヤー モジュールやポップアップ レイヤー モジュールなどの独立性の高いコンポーネント。

ガイドとなる CSS を提供します。たとえば、リスト型の表示スタイルのセットをいくつか用意し、システム全体のすべてのリスト表示をこの場所に集めます。将来のスキンの比較と変更は、アーティストにとって非常に容易になります。

CSS の原則: 同じ機能領域の 2 つのスタイルが非常に似ている場合は、1 つだけを保持してください。

フレーム（列）はグリッドを使用して幅を制御し、コンテンツは高さを制御します。ページが複数の列で構成されている場合、各列の幅はチャネルによって固定または比例して固定できますが、高さは必要です。内容に応じて。

CSSのルールが決定した後は、オープンソースやコスト削減の観点から制御・管理する必要がある一方で、新たに追加されたCSSはルールに従って動作する必要があり、そのためには忠実度の高いデザイナーが必要となります。ビジネス開発者は要件を設定する必要がありますが、一方では元の CSS を徐々に再構築する必要があります。

CSS 自体は継承とモジュール化をサポートしています。さらに、HTML ページでは、「div class="player wmpPlayer"」などのスタイルや拡張スタイルも比較的簡単に使用できます。

ある日、プロジェクトのフロントエンドが非常に複雑になり、HTML に UML モデリングが必要になった場合は、それに CSS も追加します。 DOM とその関連モデルおよび関連モデルは、モデリングに非常に適しています。

最後に http://oocss.org/ の例で終わります:

Css コード

1. /* **************** テンプレート ***************** */
2. /* ===== = ページのヘッド、ボディ、およびフット ====== */
3. body{/*_text-align:center;*/}/* IE5.5 */
4. .body{overflow:hidden; _オーバーフロー:表示; _zoom:1;}
5. .page{margin: 0 auto; width: 950px;/*_text-align:left;*/} /* 他のテンプレート要素をラップして幅を設定します */ /* text-align IE5.5 */
6. /* 「オールドスクール」および「リキッド」ページを拡張します異なるページ幅を許可する*/
7. .oldSchool{width:750px;}
8. .gs960{width:960px;}
9. .liquid{extends:.page; width: auto;margin:0;}
10. /* ====== 列 ====== */
11. .main{overflow: hidden;_overflow:visible;_zoom:1;}
12. .leftCol {フロート:左; width:250px;_margin-right:-3px;}
13. .rightCol{float:right; 幅：300px; _ margin-left：-3px;}
/*列を拡張して共通の列の幅を可能にします*/
15. .gmail{width：160px;}。 {width:240px;}
16. .myYahoo{width:300px;}
18. /* **************** コンテンツ オブジェクト ********** ******* */
19. /* ====== デフォルトの間隔 ====== */
20. h1, h2, h3, h4, h5, h6, ul, ol,dl, p ,blockquote {padding: 10px;}
21. h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
22. pre{margin: 10px;}
23. table h1,table h2,table h3 , table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
24. /* ====== 要素 ====== */
25. img{ display:block;}
26. em{font-style: italic;}
27. strong{font-weight:bold;}
28. hr{border: 5px solid #e2e2e2; ボーダー幅: 0 0 5px 0; margin: 20px 10px 10px 10px;}
29. code{color:#0B8C8F;}
30. /* ====== 見出し ====== */
31. /* .h1-.h6 クラス を使用する必要があります意味的に適切な見出しレベルを維持するため - 非見出しには使用しないでください*/
32. h1, .h1{font-size:196%; フォントの太さ:標準; フォントスタイル: 通常; color:#AE0345;}
33. h2, .h2{font-size:167%; フォントの太さ:標準; フォントスタイル: 通常; color:#AE0345;}
34. h3, .h3{font-size:146.5%; フォントの太さ:標準; フォントスタイル: 通常; color:#DF2B72;}
35. h4, .h4{font-size:123.1%; フォントの太さ:標準; フォントスタイル: 通常; color: #333;}
36. h5, .h5{font-size:108%; フォントの太さ:太字; フォントスタイル: 通常; color:#AE0345;}
37. h6, .h6{font-size:108%; フォントの太さ:標準; フォントスタイル: 斜体; color:#333;}
38. /* 追加の見出しが必要な場合は、追加のクラスを介して作成する必要があり、場所に依存するスタイルを使用することは決してありません*/
39. .category{font-size:108%; フォントの太さ:標準; フォントスタイル: 通常; テキスト変換:大文字; color: #333;}
40. .category a{color: #333;}
41. . important a{font-weight:bold;}
42. /* リンク */
43. a { color: #036; font-weight:bold;text-decoration: none }
44. a:focus, a:hover { text-decoration: underline }   
45. a:訪問済み { color:#005a9c; }
46. /* ====== リスト ======*/
47. /* 番号付きリスト */
48. ol.simpleList li{list-style-type: 10 進数; margin-left:40px;}
49. /* standard list */
50. ul.simpleList li{list-style-type:disc; margin-left:40px;}
51. /* ====== 表 ====== */
52. .data{padding: 20px; 位置:相対; zoom:1;vertical-align: top;border-right:solid 1px transparent;/*border は、データテーブルが境界線をオーバーレイする原因となるFF2のバグを修正しました*/}
53. .data table {width:100%;border: 1px solid #AE0345;}
54. th, td{vertical-align:top;border:1px solid #AE0345;}
55. .txtC, .data .txtC td, .data .txtC th{text-align:center;}
56. .txtL, .data .txtL td, .data .txtL th{text-align:left;}
57. .txtR, .data .txtR td, .data .txtR th{text-align:right;}
58. .txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
59. .txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
60. .txtM 、.data .txtM td, .data .txtM th{vertical-align:middle;}
61. .data th,.data td{padding:3px 20px}
62. .data thead tr{#fff0f8;}
63. .data th{色:#000; font-weight:bold}