1. グローバル リセットを使用する
ブラウザーの互換性を実現するために、ブラウザー要素のデフォルト属性をリセットするには、リセットを使用します。ただし、グローバル Reset:
*{ margin:0; padding:0; }
は使用しないでください。これは、遅くて非効率な方法であるだけでなく、いくつかの不要な要素がリセットされるためです。そしてパディング。 YUI Reset と Eric Meyer の実践を参照することをお勧めします。リセットは静的なものではなく、ブラウザーの互換性と操作の利便性を実現するために、プロジェクトのさまざまなニーズに応じて適切に変更する必要があります。私が使用するリセットは次のとおりです:
/**内側と外側の余白を明確にする **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote,
dl, dt, dd, ul, ol, li、
pre、
form、fieldset、legend、button、input、textarea、
th、td、
img{
border:medium none;
margin: 0;
padding: 0;
}
/**デフォルトのフォントを設定します ** /
body,button, input, select, textarea {
font: 12px/1.5 ,tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100% ; }
em{font-style:normal;}
/**リスト要素をリセット **/
ul、ol { list-style: none; }
/**ハイパーリンク要素をリセット **/
a { text-decoration : なし ; カラー:#333;}
a:hover { テキスト装飾: 下線; カラー:#F40; }
/**画像要素をリセット **/
img{ border:0px;}
/**テーブル要素をリセット * */
table { border-collapse: Collapse; border-spacing: 0; }
2. 良い名前付けの習慣
乱雑なコードや意味不明な名前が付けられたコードは、間違いなく人を狂わせます。次のコードのように:
.aaabb{margin:2px;color:red;}
実際のプロジェクトでは初心者でもこのようなクラス名を付けることはないと思いますが、このようなコードにも非常に問題があると考えたことはありますか:
私の名前はWiky
問題は、元の赤いフォントをすべて青に変更する必要がある場合、変更後に、スタイルは次のようになります:
.red{color:bule;}
このような名前は、.leftBar という名前のサイドバーを右側のサイドバーに変更する必要がある場合、非常に面倒になります。したがって、要素の特性 (色、位置、サイズなど) をクラスや ID の名前に使用しないでください。#navigation{...}、.sidebar{... などの意味のある名前を選択できます。 }, .postwrap{ ...}
このように、これらのクラスまたは ID を定義するスタイルをどのように変更しても、それらと HTML 要素の間の接続は影響を受けません。
一部の固定スタイルは定義後に変更されないため、
.alignleft{float:left;margin-right:20px; などの名前を付けるときに前述の状況を心配する必要はありません。 }
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
では、このような段落については
私は段落です!
この段落を元の左揃えから右揃えに変更する必要がある場合は、その className を alignright に変更するだけで済みます。
3. コードの省略
CSS コードの省略により、コードの記述速度が向上し、コードの量が簡素化されます。 CSS では、マージン、パディング、ボーダー、フォント、背景、色の値など、省略できるプロパティが多数あります。コードの省略形を学習すると、元のコードは次のようになります。
li{
font-family:Arial 、Helvetica、sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
は省略可能as:
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
これらの属性の省略方法について詳しく知りたい場合は、「」を参照してください。一般的な CSS 略語構文の概要」。
4. CSS 継承を使用する
ページ上の親要素の複数の子要素が同じスタイルを使用する場合、親要素に同じスタイルを定義し、それらの子要素にこれらの CSS スタイルを継承させることが最善です。こうすることで、コードを適切に保守し、コードの量を減らすことができます。元のコードは次のようになります。
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif;
これは次のように省略できます:
#container{ font-family:Georgia, serif; }
5. 複数のセレクターの使用
共通のスタイルがある場合は、複数の CSS セレクターを 1 つにマージできます。そうすることで、コードが簡潔に保たれるだけでなく、時間とスペースも節約されます。例:
h1{ font-family:Arial、Helvetica、sans-serif; }
h2{ font-family:Arial、Helvetica、sans-serif; font -family:Arial, Helvetica, sans-serif; }
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; に結合できます。
6. 適切なコード コメント
コード コメントにより、他の人がコードを理解しやすくなり、コード コメントを合理的に整理することで構造がより明確になります。スタイル シートの先頭にディレクトリを追加することを選択できます:
この方法では、コードの構造が一目で明確になり、コードを簡単に見つけて変更できます。
コードの主要なコンテンツも適切に分割し、必要に応じてコードにコメントを付ける必要があります。これは、チーム開発にも役立ちます。
/*** ヘッダー ***/
#header{ height: 145px;相対; }
#ヘッダh1{幅:324px;マージン:45px;高さ:72px;}
/*** コンテンツ ***/
#コンテンツ{背景:#fff; float:left; min-height:600px;
#content h1{color:#F00}
#content .recent{ margin-bottom: 20px;ボトム:1px ソリッド #f3f3f3; オーバーフロー: 非表示; }
/*** フッター ***/
#フッター{ クリア:両方; }
# フッター h4 :#b99d7f; font-family:Arial, Helvetica, sans-serif; }
7. CSS コードをアルファベット順に並べ替えると、検索が速くなります。変更用:
/*** スタイル プロパティはアルファベット順に並べ替えられます ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial、Helvetica、sans-serif ;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
8. CSS を読みやすい状態に保つ
読みやすい CSS を書く スタイルの検索と変更が容易になります。次の 2 つのケースのどちらが読みやすいかは自明だと思います。
/*** スタイル属性ごとに 1 行を記述します ***/
div{
背景色:#3399cc;
カラー:#666;
フォント: 1.2em/1.4em Arial、Helvetica、サンセリフ;
高さ:300px;
マージン: 10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** すべてのスタイル属性は同じ行に記述されます ***/
div{background-color:#3399cc color:#666;フォント: 1.2em/1.4em Arial、Helvetica、sans-serif; 高さ: 10px 5px; パディング: 5px 0 10px 5px; }
一部のスタイル属性がセレクターが少ない場合は、次の 1 行を書きます:
/*** 属性の少ないセレクタ属性は同じ行に記述されます ***/
div{background-color:#3399cc; color:#666;}
このルールは難しくもありませんが、どちらでも構いません。書くときの私のアドバイスは、コードの一貫性を常に保つことです。属性が多い場合は、複数の行に分けて記述します。属性が 3 つ未満の場合は、1 行で記述できます。
9. より良いスタイルの属性値を選択する
CSS の一部の属性は、効果は似ていますが、パフォーマンスに違いがあります。
違いは、border:0 は境界線を 0px に設定することです。ページ上には表示されませんが、border のデフォルト値に従って、ブラウザはまだ border-width/border-color をレンダリングします。つまり、メモリ値が占有されています。
しかし、 border:none はボーダーを「none」に設定します。これは、ブラウザが「none」を解析するとき、レンダリングアクションを実行しません、つまり、メモリ値を消費しません。したがって、 border:none; を使用することをお勧めします
同様に、display:none はレンダリングせずにオブジェクト ブラウザを非表示にし、メモリを占有しません。そして可視性：隠された意志。
10. @import の代わりに
を使用します
まず第一に、@import は XHTML タグに属しておらず、以前のブラウザーとの互換性があまり高くなく、ウェブサイトのパフォーマンスへの影響。詳細については、「高パフォーマンスの Web サイト設計: @import を使用しない」を参照してください。したがって、@import の使用は避けてください
11. 外部スタイル シートを使用してください
この原則は常に良い設計慣行です。外部ファイルを使用すると、保守と変更が簡単になるだけでなく、さらに重要なことに、CSS ファイルをブラウザーにキャッシュできるため、ページ速度が向上します。 HTML ドキュメントに組み込まれた CSS は、リクエストごとに HTML ドキュメントとともに再ダウンロードされます。したがって、実際のアプリケーションでは、CSS コードを HTML ドキュメントに組み込む必要はありません:
