効率的でクリーンな CSS コードの原則 (パート 2)

6. 適切なコード コメント

コード コメントにより、他の人がコードを理解しやすくなり、コード コメントを合理的に整理することで構造がより明確になります。スタイルシートの先頭にディレクトリを追加することができます:

/*————————————
1. ヘッダー
3. サイドバー
5. Footer
— —————————– */

これにより、コードの構造が一目で明確になり、コードを簡単に見つけて変更することができます。

コードのメインコンテンツも適切に分割し、必要に応じてコードにコメントを追加する必要があります。これはチーム開発にも役立ちます:

/*** ヘッダー ***/

#header{height :145px;position:relative; }

#header h1{width:324px;margin:45px0020px;float:left;height:72px;}

/*** コンテンツ ***/

#コンテンツ{背景: #fff;width:650px;float:left;min-height:600px;overflow:hidden;}

#content h1{color:#F00}/* フォントの色を設定*/

#content .posts {overflow:hidden ; }

#content .recent{margin-bottom:20px;border-bottom:1pxsolid#f3f3f3;position:relative;overflow:hidden; }

/*** フッター ***/

#footer{clear :both;padding:50px5px0;overflow:hidden;}

#footer h4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font-size:1.1em;}

7 CSS コードを並べ替えます

コード内のプロパティをアルファベット順に並べ替えることができる場合、検索と変更がより速くなります:

/*** スタイル プロパティはアルファベット順に並べ替えられます ***/

div{

background-color:# 3399cc;

カラー:#666;

フォント:1.2em/1.4emArial、Helvetica、サンセリフ;

高さ:300px;

マージン:10px5px;

パディング:5px01 0px5px; ;

z-index:10;

}

8. CSS を読みやすくする

読みやすい CSS を書くと、スタイルの検索と変更が容易になります。次の 2 つのケースのどちらが読みやすいかは自明だと思います。

/*** スタイル属性ごとに 1 行を記述します ***/

div{

background-color:#3399cc;

color:#666;

font:1.2em/1.4emArial、Helvetica、sans-serif;

高さ:300px;

マージン:10px5px;

パディング:5px010px5px;

幅:30%;

z-index:10;

}

/*** すべてのスタイル属性は同じ行に記述されます ***/

div{背景色:#3399cc;色:#666;フォント:1.2em/1.4emArial、Helvetica、sans-serif;高さ:300px;マージン:10px5px;パディング:5px010px5px;幅:30%;z-index:10;

スタイル属性が少ないセレクターについては、次の行を書きます:

/*** 属性の少ないセレクタ属性は同じ行に記述されます ***/

div{background-color:#3399cc;color:#666;}

このルールは難しくてすぐにできるものではありませんが、どの方法で書いても、コードの一貫性を常に保つことをお勧めします。属性が多い場合は、複数の行に分けて記述します。属性が 3 つ未満の場合は、1 行で記述できます。

9. より適切なスタイル属性値を選択する

CSS の一部の属性は、効果は似ていますが、パフォーマンスに違いがあります。

違いは、 border:0 が border を 0px に設定することです。ページ上には表示されませんが、border のデフォルト値に従って、ブラウザはまだ border-width/border-color をレンダリングします。つまり、メモリ値が占有されています。

そして、 border:none は境界線を「none」に設定します。これは、ブラウザーが「none」を解析するとき、レンダリングアクションを実行しません。つまり、メモリ値を消費しません。したがって、 border:none; を使用することをお勧めします

同様に、display:none はレンダリングせずにオブジェクト ブラウザを非表示にし、メモリを占有しません。そして可視性：隠された意志。

10. @import の代わりに を使用します

まず第一に、@import は XHTML タグに属しておらず、以前のブラウザーとの互換性があまりなく、特定の影響を及ぼします。ウェブサイトのパフォーマンスに悪影響を及ぼします。

11. 外部スタイルシートを使用する

この原則は常に優れたデザイン実践です。外部ファイルを使用すると、保守と変更が簡単になるだけでなく、さらに重要なことに、CSS ファイルをブラウザーにキャッシュできるため、ページ速度が向上します。 HTML ドキュメントに組み込まれた CSS は、リクエストごとに HTML ドキュメントとともに再ダウンロードされます。したがって、実際のアプリケーションでは、CSS コードを HTML ドキュメントに組み込む必要はありません:

代わりに を使用して外部スタイル シートをインポートします:

12. CSS 式の使用を避ける (Expression)

CSS 式は、CSS プロパティを動的に設定する強力な (ただし危険な) 方法です。 Internet Explorer では、バージョン 5 以降の CSS 式がサポートされています。次の例では、CSS 式を使用して、背景色を 1 時間ごとに切り替えることができます。

上記の通り、式にはJavaScriptの式が使用されています。 CSS プロパティは、JavaScript 式の評価に基づいて設定されます。

式の問題は、私たちが思っているよりも頻繁に評価されることです。ページを表示して拡大したときだけでなく、ページをスクロールしたときやマウスを移動したときも再計算されます。 CSS 式にカウンターを追加して、式が評価される頻度を追跡します。ページ上でマウスを動かすだけで、10,000 を超える計算を簡単に実行できます。

CSS 式を使用する必要がある場合は、CSS 式が何千回も評価され、ページのパフォーマンスに影響を与える可能性があることを必ず覚えておいてください。したがって、絶対に必要な場合を除き、CSS 式の使用は避けてください。

13. コード圧縮

Web サイト プロジェクトをインターネットに展開する場合は、Web ページの読み込みを高速化するために CSS を圧縮してコメントとスペースを削除することを検討する必要があります。コードを圧縮するには、YUI Compressor などのツールを使用できます。これにより、CSS コードを合理化し、ファイル サイズを削減して読み込み速度を高めることができます。

上記は、効率的でクリーンな CSS コードの原則 (パート 2) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。