現在プロジェクトで CSS コードが機能している場合でも、誰でも CSS コードを作成できます。しかし、CSS の方が優れているでしょうか? webjx.com ではこの分野でさまざまなテクニックを紹介していますが、次の 5 つの側面を活用して CSS を改善してください。そうすることで、よりプロフェッショナルに見え、コードが改善されます。
1.リセット
まず最初に、非常に真剣に言っておきますが、特定のカテゴリは常にリセットする必要があります。 Eric Meyer Reset、YUI Reset を使用する場合でも、独自のリセット コードを作成する場合でも、それを使用してください。
すべての要素からパディングとマージンを簡単に削除できます。
html、ボディ、div、h1、h2、h3、h4、h5、h6、ul、ol、dl、li、dt、dd、p、blockquote、
プレ、フォーム、フィールドセット、テーブル、th、td {マージン: 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 { ボーダーボトム: 1px ソリッド #dedede; フォントサイズ: 18px; マージン右: 48px; 位置: 相対;
例 2 が適切なマージン プロパティをより速く見つけることができないとは言えません。要素のプロパティをアルファベット順に並べ替えます。 CSS を一貫して作成すると、特定のプロパティを探す時間を節約できます。
コードをある方法で整理する人もいれば、別の方法で整理する人もいるとは思いますが、私の会社では、すべてのコードをアルファベット順に整理するという合意の下で決定しました。このようにコードを整理すると、他の人と協力して作業するのに間違いなく役立ちます。私は、プロパティがアルファベット順にソートされていないカスケード スタイル シートに出会うたびに身がすくんでしまいます。
3. 組織
関連するコンテンツが近くにあるようにスタイル シートを整理し、探しているコンテンツを見つけやすくする必要があります。より効率的な注釈を使用します。例として、カスケード スタイル シートを構成する方法は次のとおりです。
/*****Reset*****/要素のパディングとマージンを削除します。
/*****基本要素*****/基本要素のスタイルを定義します: body、h1-h6、ul、ol、a、p など。
/*****汎用クラス*****/ 片側をフロートにする、要素の下マージンを削除するなどの単純なスタイルを定義します。 もちろん、それらのほとんどは必要なセマンティクスに関連しませんが、コードを効率的に処理する必要があります。
/*****基本レイアウト*****/基本テンプレートを定義します: ヘッダー、フッターなど。Web ページ レイアウトの基本要素を定義するのに役立ちます。
/*****Header*****/すべての Hearder 要素を定義します
/*****Content*****/コンテンツ ボックス内のすべての要素を定義します
/*****フッター*****/すべてのフッター要素を定義します
/*****Etc*****/他のセレクターを定義します。同様の要素に注釈を付けてグループに分類すると、必要なものをより早く見つけることができます。
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 が存在することはわかっているので、それらを追加します。
最初にドキュメントにタグを付けることで、divities1 とclasses2 のすでに運命づけられている問題に遭遇することはなくなります。 /*CSS を書き始めて、別のフックが必要になることに気づいたときにのみ、その要素を追加する必要があります。達成しようとしていることを達成します。*/(原文は翻訳されていません)。
CSS 子セレクターを使用して子要素を指定します。単に要素にクラスまたは ID セレクターを追加するだけではありません。覚えておいてください: CSS は、適切にフォーマットされたドキュメント (またはマークアップ構造) がなければ意味がありません。
要約する
これらは、CSS コードをより適切に作成するのに役立ちます。しかし、これでこのリストが終わるわけではありません。次に、webjx.com に注目してください。