CSS ファイルの保守性を向上させる 5 つの方法_html/css_WEB-ITnose

フロントエンドの作業を完了すると、多くの人はプロジェクトの構造や詳細を忘れてしまいます。ただし、コードはすぐに完全に完成するわけではありません。残りの時間は継続的なメンテナンス作業が行われるため、これらの作業は自分で完了できない場合があります。したがって、適切に構造化されたコードは、保守性を大幅に最適化できます。ここでは、CSS ファイルの保守性を向上させる 5 つの方法を紹介します。これは、より優れた CSS スタイル ガイドです。

1. スタイルを細分化する
小規模なプロジェクトの場合は、コードを記述する前に、ページの構造またはページのコンテンツに応じてコードをいくつかのブロックに分割し、コメントを付けます。たとえば、グローバル スタイル、レイアウト、フォント スタイル、フォーム、コメントなどをいくつかの異なるブロックに分割して作業を続けることができます。
大規模なプロジェクトの場合、これは明らかに何の効果もありません。この時点で、スタイルをいくつかの異なるスタイル シート ファイルに分割する必要があります。以下のマスター スタイルシートはこのアプローチの例であり、その役割は他のスタイル ファイルをインポートすることです。この方法を使用すると、スタイル構造を最適化できるだけでなく、不必要なサーバー要求の一部を削減することもできます。ファイルを分解するにはさまざまな方法がありますが、マスター スタイルシートでは最も一般的な方法が使用されます。
/*----------------------------------------------- --- -------------------
[マスター スタイルシート]
プロジェクト: Smashing Magazine
バージョン: 1.1
最終変更: 05/02/08 [Float バグを修正、 vf]
割り当て先: ヴィタリー・フリードマン (vf)、スヴェン・レナーツ (sl)
主な用途: 雑誌
-------------------------------------- ------ -------------------------------------------- -*/
@import "reset.css";
@ import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/ * @import "debugging.css"; */
大規模なプロジェクトの場合は、CSS ファイルのアップグレード フラグやいくつかの診断手段を追加することもできますが、ここでは詳しく説明しません。

2. CSS ファイルのインデックスを作成します
CSS ファイル全体の構造を素早く理解するには、ファイルの先頭にファイル インデックスを作成することをお勧めします。考えられる方法の 1 つは、ツリー状のインデックスを構築することです。構造 ID とクラスの両方がツリーのブランチになる可能性があります。以下の通り:
/*------------------------------------------ ---- ---------------------
[レイアウト]
* body
Header / #header
Content / #content
- 左カラム / #leftcolumn
- 右カラム / #rightcolumn
- サイドバー / #sidebar
- RSS / #rss
- 検索 / #search
- ボックス / .box
- サイドブログ / #sideblog
フッター / #footer
ナビゲーション #navbar
広告 .ads
コンテンツヘッダー h2
—————————————————————-*/
あるいは、次のようにすることもできます:
/*---------- ------ -------------------------------------------- ------
[目次]
2. ヘッダー/#header
2. ナビゲーション/#navbar
3. コンテンツ/#content
3.3.1. / #rss
3.3.2. 検索 / #search
3.3.3. ボックス / .box
3.3.4. サイドブログ / #sideblog
3.3.5. フッター / #footer
-------------------------------------- ----- ----------*/
もう 1 つの方法は、インデントせずにコンテンツを最初に単純にリストすることです。以下の例では、RSS セクションにジャンプする必要がある場合は、8.RSS を検索するだけです。
/*----------------------------------------------- --- -------------------
【目次】
1. ヘッダー/#header
3. ナビゲーション/#navbar
4. / #content
5. 左列 / #leftcolumn
6. 右列 / #rightcolumn
3. CSS で色とレイアウトを定義することはできませんが、色とレイアウトを記述するコードでは、何度も使用できるクラスに遭遇することがよくあります。ここでは、それらは CSS 定数と見なすことができます。

CSS 定数定義の不確実性を減らす 1 つの方法は、CSS ファイルの先頭のコメントにいくつかの定義を入れること、つまり定数を定義することです。最も単純なアプリケーションの 1 つは、カラー テーブルを作成することです。こうすることで、ページ全体の色をすぐに把握できるので、修正を繰り返す際のミスを防ぐことができます。色を変更する必要がある場合でも、すぐに見つけることができます。
/*----------------------------------------------- --- ------------------
# [カラーコード]
# ダークグレー (テキスト): #333333
# ダークブルー (見出し、リンク) #000066
#ミッドブルー (ヘッダー) #333399
# ライトブルー (トップナビゲーション) #CCCCFF# ミッドグレー: #666666# */
あるいは、レイアウトで使用される色の説明を選択することもできます。特定の色について、その色を使用するブロックをリストできます。もちろん、ページ要素ごとに色をリストすることも選択できます。
/*----------------------------------------------- --- ------------------
【カラーコード】
背景: #ffffff (白)
コンテンツ: #1e1e1e (薄い黒)
ヘッダー h1: #9caa3b (緑)
ヘッダー h2: #ee4117 (赤)
フッター: #b5cede (濃い黒)
a (標準): # 0040b6 (ダークブルー)
a (訪問済み): #5999de (ライトブルー)
a (アクティブ): #cc0000 (ピンク)
--------------------- --- --------------------------------------------------- ---*/
タイポグラフィーについても同じ例があります。
/*----------------------------------------------- --- -------------------
[タイポグラフィ]
ボディコピー: 1.2em/1.6em Verdana、Helvetica、Arial、Geneva、サンセリフ;
ヘッダー: 2.7em/1.3em Helvetica、Arial、「Lucida Sans Unicode」、Verdana、サンセリフ;
入力、テキストエリア: 1.1em Helvetica、Verdana、Geneva、Arial、サンセリフ;
サイドバー見出し: 1.5em Helvetica、Trebuchet MS 、Arial、サンセリフ;
注: 後続の見出しレベルごとに見出しが 0.4em ずつ減少します
---------------------------- --- ----------------------------------*/

4. CSS プロパティの書式設定
の場合コードを記述するとき、いくつかの特別なコーディング スタイルを使用すると、CSS コードの可読性が大幅に向上します。多くの人がさまざまなコーディング スタイルを使用しています。色やフォントコードを最初に置くことに慣れている人もいれば、フローティングや位置などのより「重要な」属性を最初に置くことを好む人もいます。同様に、ページ要素はレイアウト内の構造に従って順序付けできます:
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding : 0;
}
一部の開発者は、より興味深いアプローチを使用しています。つまり、プロパティをアルファベット順に並べています。このようなアプローチでは、一部のブラウザーで問題が発生する可能性があることに注意してください。
フォーマットが何であっても、これらのフォーマット方法を明確に定義していることを確認する必要があります。こうすることで、同僚がコードを読んだときにあなたの努力に感謝するでしょう。

5. インデントがあなたの味方になります！
コードをより直感的にするために、アウトライン要素のスタイルを 1 行で定義できます。指定されたセレクターに 3 つ以上の属性がある場合、このメソッドは混乱を引き起こします。ただし、適度に使用すると、同じクラス内の違いを明確に区別できます。
#main-column { 表示: インライン; フロート: 左; 幅: 30em; }
#main-column h1 { フォントファミリー: ジョージア、タイムズ、マージン-ボトム: 20px; #main-column p { color: #333; }
同時に、スタイル変更のメンテナンスも面倒な問題です。多くの人はスタイルを変更した後にそのことを忘れてしまい、その結果、後で変更されたスタイルがページ エラーの原因になったことに気づき、一生懸命探す必要があります。したがって、変更されたスタイル用に特別なフォーマットを構築する必要があります。非常に簡単な方法は、変更したスタイルをインデントすることです。同時に、いくつかのコメント (「@new」など) を使用してマークを付けることもできます。
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px Solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; * @new */
}
一般に、適切なスタイル ガイドを確立するだけで、スタイル シートが読みやすくなります。文書の理解に役立たないスタイル ガイドは必ず削除し、多すぎる要素に対して多すぎるスタイル ガイドを使用しないようにしてください。次に、読みやすく保守しやすい CSS ファイルを作成するために熱心に取り組みます。
8. RSS / #rss
9. ボックス / #sideblog
12. フッター / #footer
- ------------------------------------------------- - --------*/

/*--------------------- - ------------------------------------------
[8 . RSS / #rss]
*/
#rss { ... }
#rss img { ... }
このようなスタイル取得を定義すると、他の人がコードを読んで学習することが効果的に容易になります。大規模なプロジェクトに取り組んでいる場合は、コードを読むときに簡単に参照できるように、検索結果を印刷することもできます。