1.リセット
まず最初に、非常に真剣に言っておきますが、特定のカテゴリは常にリセットする必要があります。 Eric Meyer Reset、YUI Reset を使用する場合でも、独自のリセット コードを作成する場合でも、それを使用してください。
すべての要素からパディングとマージンを簡単に削除できます。
| html、本文、div、h1、h2、h3、h4、h5、h6、ul、ol、dl、li、dt、dd、p、blockquote、pre、form、fieldset、table、th、td { margin: 0;パディング: 0; |
Eric Meyer Reset と YUI Reset はどちらも非常に強力ですが、私にとってはやりすぎです。最終的にはすべてをリセットして、すべての要素のプロパティを再定義する必要があると思います。これが、Eric Meyer がより効率的な使用 (スタイルシートのリセット) を推奨している理由であり、彼のリセット スタイルシートを単に使用するのではなく、プロジェクトにドラッグ アンド ドロップします。これを調整して (リセット スタイルシート)、独自のリセット スタイルシートを作成します。
ああ、使用をやめてください:
| * {マージン: 0; パディング: 0; |
もっと時間をかけて作業してください。パディングを削除するとラジオ ボタンはどうなると思いますか?フォーム要素は時々おかしなことをすることがあるので、最も効果的な方法はフォーム要素を独立させることです。
2. 並べ替え
小さなテスト
この例は、適切なマージン属性をより速く見つける方法について考えてもらうためのものです。
例1
| div#header h1 { z インデックス: 101; 色: #000; 位置: 相対的; 行の高さ: 24px; マージン右: 48px; border-bottom: 1px ソリッド #dedede; フォントサイズ: 18px; } |
例2
| div#header h1 { border-bottom: 1px ソリッド #dedede; 色: #000; フォントサイズ: 18px; 行の高さ: 24px; マージン右: 48px; 位置: 相対的; z インデックス: 101; } |
例 2 が適切なマージン プロパティをより速く見つけることができないとは言えません。要素のプロパティをアルファベット順に並べ替えます。 CSS を一貫して作成すると、特定のプロパティを探す時間を節約できます。
コードをある方法で整理する人もいれば、別の方法で整理する人もいるとは思いますが、私の会社では、すべてのコードをアルファベット順に整理するという合意の下で決定しました。このようにコードを整理すると、他の人と協力して作業するのに間違いなく役立ちます。私は、プロパティがアルファベット順にソートされていないカスケード スタイル シートに出会うたびに身がすくんでしまいます。
3.組織
関連するコンテンツが近くにあるようにスタイル シートを整理し、探しているコンテンツを見つけやすくする必要があります。より効率的な注釈を使用します。例として、カスケード スタイル シートを構成する方法は次のとおりです。
| /*****リセット*****/ 要素からパディングとマージンを削除します。 /*****基本要素*****/ 基本要素のスタイルを定義します: body、h1 ～ h6、ul、ol、a、p など。 /*****汎用クラス*****/ 片側をフローティングにする、要素の下マージンを削除するなどの単純なスタイルを定義します。もちろん、それらのほとんどは必要なセマンティクスに関連しませんが、コードを効率的に処理するために必要です。 /*****基本レイアウト*****/ 基本テンプレートを定義します: ヘッダー、フッターなど。Web ページ レイアウトの基本要素を定義するのに役立ちます。 /*****ヘッダ*****/ すべての Hearder 要素を定義する /*****コンテンツ*****/ コンテンツボックス内のすべての要素を定義します /*****フッター*****/ すべてのフッター要素を定義する /*****等*****/ 他のセレクターを定義します。類似した要素に注釈を付けてグループに分類すると、必要なものをより早く見つけることができます。 |
4. 一貫性
コードをどのように記述するかに関係なく、一貫性を保つようにしてください。私は 1 行と複数行の CSS の議論にはうんざりしています。議論する必要はありません。誰もが意見を持っているので、好みの作業方法を選択し、すべてのスタイルシートで一貫性を保ってください。
個人的には、両方を組み合わせて使用します。セレクターに 3 つを超える属性がある場合は、切り捨てて複数行に記述します。
| div#header { 浮動小数点: 左幅: 100% } div#header div.column { ボーダー右: 1px ソリッド #ccc; フロート: 右右; マージン右: 50px; パディング: 10px; 幅: 300ピクセル; } div#header h1 { 浮動小数点: 左; 幅: 250px; |
したがって、自分の好きな働き方を見つけて、一貫性を保ちましょう。
5. 適切な場所から始める
マークアップ言語が完成するまでは、スタイルシートに近づかないでください。
Web ページを分割する準備をするときは、CSS ファイルを作成する前に、本文の開始タグと本文の終了タグの間にあるすべてのドキュメントをプレビューしてマークする必要があります。 DIV、ID、クラス セレクターは追加しません。ヒアーラー、コンテンツ、フッターなどの一般的な DIV が存在することはわかっているので、それらを追加します。
最初にドキュメントにタグを付けることで、divisions1 とclasses2 のすでに運命づけられている問題に遭遇することはなくなります。
/*その要素を追加する必要があるのは、CSS を書き始めて、目的を達成するために別のフックが必要になることに気付いた場合だけです。*/(原文は翻訳されていません)。
CSS 子セレクターを使用して子要素を指定します。単に要素にクラスまたは ID セレクターを追加するだけではありません。覚えておいてください: CSS は、適切にフォーマットされたドキュメント (またはマークアップ構造) がなければ意味がありません。