フロントエンドの作業が完了すると、多くの人はプロジェクトの構造や詳細を忘れてしまいます。ただし、コードはすぐに完全に完成するわけではありません。残りの時間は継続的なメンテナンス作業が行われるため、これらの作業は自分で完了できない場合があります。したがって、適切に構造化されたコードは、保守性を大幅に最適化できます。ここでは、CSS ファイルの保守性を向上させる 5 つの方法を紹介します。これは、より優れた CSS スタイル ガイドです。
1. 自分のスタイルを細分化する
小規模なプロジェクトの場合は、コードを記述する前に、ページの構造やページの内容に応じてコードをいくつかのブロックに分割し、コメントを付けます。たとえば、グローバル スタイル、レイアウト、フォント スタイル、フォーム、コメントなどをいくつかの異なるブロックに分割して作業を続けることができます。
大規模なプロジェクトの場合、これは明らかに何の影響もありません。この時点で、スタイルをいくつかの異なるスタイル シート ファイルに分割する必要があります。以下のマスター スタイルシートはこのアプローチの例であり、その主な仕事は他のスタイル ファイルをインポートすることです。この方法を使用すると、スタイル構造を最適化できるだけでなく、不必要なサーバー要求の一部を削減することもできます。ファイルを分解するにはさまざまな方法がありますが、マスター スタイルシートでは最も一般的な方法が使用されます。
/*------------------------------------------------ ------------------ [マスタースタイルシート] |
同時に、大規模なプロジェクトの場合は、CSS ファイルのアップグレード フラグやいくつかの診断手段を追加することもできますが、ここでは詳しく説明しません。
2. CSSファイルインデックスの作成
CSS ファイル全体の構造をすばやく理解するには、ファイルの先頭にファイル インデックスを作成することをお勧めします。考えられる方法の 1 つは、ツリー状のインデックスを構築することです。構造 ID とクラスがツリーのブランチになる可能性があります。次のように：
| /*------------------------------------------------ ------------------ 【レイアウト】 * 体 + ヘッダー / #ヘッダー + コンテンツ / #content - 左列 / #leftcolumn - 右列 / #rightcolumn - サイドバー / #サイドバー - RSS / #rss - 検索 / #検索 - ボックス / .box - サイドブログ / #サイドブログ + フッター / #フッター ナビゲーション #navbar 広告 .ads コンテンツヘッダーh2 —————————————————————-*/ |
または、次のようにすることもできます。
/*------------------------------------------------ ------------------ [目次] -------------------------------------------------- ------------------*/ |
もう 1 つの方法は、インデントせずにコンテンツを最初に単純にリストすることです。以下の例では、RSS セクションにジャンプする必要がある場合は、8.RSS を検索するだけです。
/*------------------------------------------------ ------------------ [目次] -------------------------------------------------- ------------------*/ /*------------------------------------------------ ------------------ |
このようなスタイル検索を定義すると、他の人がコードを読んで学習することが効果的に容易になります。大規模なプロジェクトに取り組んでいる場合は、コードを読むときに簡単に参照できるように、検索結果を印刷することもできます。