CSSファイルの保守性を向上させる5つの方法まとめ_体験交流

1. スタイルを分解する

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

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

/*------------------------------------------ --- ------------------------

[マスター スタイルシート]
プロジェクト: スマッシング マガジン
バージョン: 1.1
最終変更: 05/02/08 [Float バグ、vf を修正]
割り当て先: Vitaly Friedman (vf)、Sven Lennartz (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 / #コンテンツ
- 左列 / #leftcolumn
- 右列 / #rightcolumn
- サイドバー / #sidebar
- RSS / #rss
- 検索 / #search
- ボックス /ボックス
- サイドブログ / #sideblog
フッター / #footer
ナビゲーション #navbar
広告 .ads
コンテンツ ヘッダー h2
—————————————— —————————-*/
またはこれも可：

/*---------------------- ---------------------------------------

【目次】
１．本文
２．ヘッダー/#header
2.1.ナビゲーション / #navbar
3.コンテンツ/ #content
3.1.左列/#leftcolumn
3.2.右列/#rightcolumn
3.3.サイドバー / #sidebar
3.3.1. RSS / #rss
3.3.2.検索/#検索
3.3.3.ボックス/ .ボックス
3.3.4.サイドブログ / #sideblog
3.3.5.広告 / .ads
4.フッター / #footer

----------------------------------------------------- -------------------------*/

別の方法では、最初の単一のコンテンツのリストを送信することもできます。次の例では、ＲＳＳ部分に転送する必要がある場合には、単純なＲＳＳの検索だけが必要である。

/*------------------------------------------ --- ------------------------

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

------------------------------------- ----------- ------------------------*/



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

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

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,
フォーム {
border: 0;
マージン: 0;
パディング: 0;
}

一部の配信者は、プロパティの最初の文字を順番に並べるという、より賢明な方法を採用しています。

自分自身の形式に関係なく、これらの形式のアプローチは常にクリアされていることが確認されています。このように、ユーザーのコードを検討する時期には、ユーザーの努力が感じられるでしょう。 >5. 圧縮は転送される友人です！

転送されるコードをより正確に理解するには、一行を使用して大元素の型を定義できます。しかし、このような方法を適切に使用すると、同じ種類の違いが明確に区別されます。

#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin -bottom: 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 ファイルを作成するために熱心に取り組みます。