CSS ファイルの保守性と可読性を向上させるためのガイド ページ 1/2_Experience Exchange

したがって、適切に構造化されたコードは、保守性を大幅に最適化できます。以下に、CSS ファイルの保守性を向上させるための 4 つのヒントを示します。これは、より良い CSS スタイルの編成習慣を使用して WEB フロントエンド開発を実行するためのガイドです。

1. CSS スタイル ファイルの分解

小規模なプロジェクトの場合、コードを記述する前に、ページ構造に従ってコードをいくつかの部分に分割します。またはページのコンテンツにコメントを付けてください。たとえば、グローバル スタイル、レイアウト、フォント スタイル、フォーム、コメントなどをいくつかの異なるブロックに分割して作業を続けることができます。

大規模なプロジェクトの場合、これは明らかに何の効果もありません。この時点で、スタイルをいくつかの異なるスタイル シート ファイルに分割する必要があります。以下のマスター スタイルシートはこのアプローチの例であり、その主な仕事は他のスタイル ファイルをインポートすることです。この方法を使用すると、スタイル構造を最適化できるだけでなく、不必要なサーバー要求の一部を削減することもできます。ファイルを分解するにはさまざまな方法がありますが、マスター スタイルシートでは最も一般的な方法が使用されます。



@import "reset.css?1.1.5";
@import "layout.css?1.1.5";
@import "colors.css?1.1.5";
@import "typography.css?1.1.5";
@import "flash.css?1.1.5";
/* @import "debugging.css?1.1.5"; */


同時に、大規模なプロジェクトの場合は、CSS ファイルのアップグレード フラグや診断やその他の手段を追加することもできます。ここでは詳しく説明しません。実装作業中は要約と思考に注意してください。また、jb51.net の関連記事も参照してください。

2. CSS ファイルのインデックスを作成する
CSS ファイル全体の構造をすばやく理解するには、次の場所にファイル インデックスを作成することをお勧めします。ファイルの先頭。
実現可能な方法は、ツリー状のインデックスを構築することです。構造 ID とクラスがツリーのブランチになる可能性があります。
[レイアウト]
* body
ヘッダー / #header
コンテンツ / #content
- 左列 / #leftcolumn
- 右列 / #rightcolumn - サイドバー / #sidebar
- RSS / #rss
- 検索 / #search
- ボックス / .box
- サイドブログ / #sideblog
フッター / #footer
ナビゲーション #navbar
広告 .ads
コンテンツ ヘッダー h2

または次のようにすることもできます:
[Contents]
1 . 本文
2. ヘッダー / #header
2.1. ナビゲーション / #navbar
3. コンテンツ / #content
3.1. 左列 / #leftcolumn
3.2. 右列列 / #rightcolumn
3.3. サイドバー / #sidebar
3.3.1. RSS / #rss
3.3.2. 検索 / #search
3.3.3. ボックス / .box
3.3.4. サイドブログ / #sideblog
3.3.5. 広告 / .ads
4. フッター / #footer


別の方法は次のとおりです。 just 最初に、インデントなしでコンテンツを単純にリストします。以下の例では、RSS セクションにジャンプする必要がある場合は、簡単な検索を行うだけで済みます。

[目次]
1. 本文
2. ヘッダー / #header
3. ナビゲーション / #navbar
4. コンテンツ / #content
/ />5. 左列 / #leftcolumn
6. 右列 / #rightcolumn
7. サイドバー / #sidebar
8. RSS / #rss
9. 検索 / #search
10. ボックス / .box
11. サイドブログ / #sideblog
12. 広告 / .ads
13. フッター / #footer

/*--[8. RSS / #rss]--*/
#rss { ... }
#rss img { ... }

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