CSS Explosion の管理 [closed] 質問する

Question

これは非常に良い質問です。私が調べた限りでは、CSS ファイルはしばらくすると制御不能になる傾向があります。特にチームで作業している場合に顕著ですが、チームに限ったことではありません。

以下は私自身が守ろうとしているルールです（いつも守れているわけではありませんが）。

早めにリファクタリングし、頻繁にリファクタリングします。CSSファイルを頻繁にクリーンアップし、同じクラスの複数の定義を結合します。古くなった定義はすぐに削除します。
バグ修正中に CSS を追加する場合は、変更内容についてコメントを残してください (「これは、IE < 7 でボックスが左揃えになるようにするためです」)
.classname冗長性を避けてください。たとえば、とで同じものを定義するなどです.classname:hover。
コメントを使用して/** Head **/明確な構造を構築します。
一定のスタイルを維持するのに役立つ整形ツールを使用します。私はポリスタイル、私はこれで満足しています（15ドルかかりますが、お金をかけるだけの価値はあります）。無料のものもあります（例：コード美化ツールに基づくCSS 整理、オープンソースツール)。
適切なクラスを構築します。これに関するいくつかの注意事項については以下を参照してください。
セマンティクスを使用し、DIV スープを避けます。<ul>たとえば、メニューには s を使用します。
すべてを可能な限り低いレベルで定義し（例：デフォルトのフォントファミリー、色、サイズbody）、inherit可能な場合はそれを使用します。
非常に複雑なCSSの場合は、CSSプリコンパイラが役立つかもしれません。CSS のまったく同じ理由で、すぐに他にも何人かいます。
チームで作業している場合は、CSS ファイルの品質と標準の必要性も強調してください。誰もがプログラミング言語のコーディング標準を重視していますが、CSS でもこれが必要であるという認識はほとんどありません。
チームで作業している場合は、バージョン管理の使用を検討してください。追跡がはるかに簡単になり、編集上の競合の解決もはるかに簡単になります。HTML と CSS に「興味があるだけ」の場合でも、バージョン管理は本当に価値があります。
を使用しないでください!important。IE =< 7 が対応できないからというだけではありません。複雑な構造では、を使用すると、!importantソースが見つからない動作を変更したくなることがよくありますが、長期的なメンテナンスには有害です。

賢明なクラスの構築

これが私が賢明なクラスを構築する方法です。

まずグローバル設定を適用します。

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

次に、ページのレイアウトの主なセクション（上部領域、メニュー、コンテンツ、フッターなど）を特定します。適切なマークアップを記述すると、これらの領域は HTML 構造と同一になります。

次に、CSS クラスの構築を開始し、意味がある限りできるだけ多くの祖先を指定し、関連するクラスをできるだけ密接にグループ化します。

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

CSS 構造全体を、ルートから離れるほど定義が具体的になるツリーとして考えます。クラスの数はできるだけ少なくし、繰り返しはできるだけ少なくします。

たとえば、3 つのレベルのナビゲーションメニューがあるとします。これらの 3 つのメニューは見た目が異なりますが、共通する特徴もあります。たとえば、これらはすべてであり<ul>、フォントサイズは同じで、項目はすべて隣り合っています ( のデフォルトのレンダリングとは異なりますul)。また、どのメニューにも箇条書き ( list-style-type) はありません。

まず、という名前のクラスに共通のmenu特性を定義します。

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

次に、3 つのメニューそれぞれの具体的な特性を定義します。レベル 1 の高さは 40 ピクセル、レベル 2 と 3 の高さは 20 ピクセルです。

注:複数のクラスを使用することもできますが、Internet Explorer 6では複数のクラスに問題があるなので、この例ではids を使用します。

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

メニューのマークアップは次のようになります。

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

ページ上に意味的に類似した要素がある場合 (この 3 つのメニューのように)、まず共通点を特定してクラスに配置します。次に、特定のプロパティを特定してクラスに適用します。Internet Explorer 6 をサポートする必要がある場合は、ID に適用します。

その他の HTML のヒント

これらのセマンティクスを HTML 出力に追加すると、デザイナーは後で純粋な CSS を使用して Web サイトやアプリの外観をカスタマイズできるため、大きな利点があり、時間の節約にもなります。

可能であれば、各ページの本文に固有のクラスを割り当てます。<body class='contactpage'>これにより、スタイルシートにページ固有の調整を簡単に追加できるようになります。
```
body.contactpage div.container ul.mainmenu li { color: green }
```
メニューを自動的に構築する場合は、後で広範なスタイル設定ができるように、できるだけ多くの CSS コンテキストを追加します。例:
```
<ul class="mainmenu">
 <li class="item_first item_active item_1"> First item </li> 
 <li class="item_2"> Second item </li> 
 <li class="item_3"> Third item </li> 
 <li class="item_last item_4"> Fourth item </li> 
</ul>
```
この方法では、各メニュー項目は、その意味的コンテキスト（リスト内の最初の項目か最後の項目か、現在アクティブな項目か、番号など）に応じてスタイル設定のためにアクセスできます。

上記の例で説明したように、複数のクラスを割り当てると、IE6では正常に動作しません. そこには回避策IE6 が複数のクラスを処理できるようにするためです。回避策が選択できない場合は、最も重要なクラス (アイテム番号、アクティブ、または最初/最後) を設定するか、ID を使用する必要があります。

Answer 1