ほとんどの人がCSSコードを書くことができますが、今日ではどのプログラムもあなたのためにそれを行います。 しかし、それは良いCSSでしょうか？ CSSを改善するための5つのヒントを以下に示します。
1.リセット
いずれかの形式で工場出荷時設定にリセットしてください。 既製のソリューション（ Eric Meyer 、 YUI ）を使用することも、独自のソリューションを思いついて、自分の好きなものを選択することもできます。
これは、すべての要素のマージンとインデントの通常の削除です。
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
上記の既成のソリューションは確かに非常に印象的ですが、私には少し過剰であるように思われます。 すべての要素のすべての設定をリセットし、それらを再インストールする方法を想像しています。 したがって、提案されたオプションのいずれかを使用することに決めた場合、CSSファイル全体を完全にコピーしないでください。可能な限りプロジェクトの要件を満たすように変更することをお勧めします。
また、次のことは行わないでください。
* { margin: 0; padding: 0; }
この手法では処理時間が長くなり、パディングを削除すると、一部の要素が正しく表示されなくなります（ラジオボタンなど）。 すべての設定を削除する場合、フォーム要素は予期しない動作をする可能性があるため、それらにリセットを適用しないことをお勧めします。
2.アルファベット順
どの例でmargin-rightプロパティをより速く見つけることができると思いますか？
例1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
例2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
2番目の例では、プロパティの方が速いことに同意します。 プロパティをアルファベット順に並べることで、このシーケンスを作成し、特殊なプロパティを見つけるのにかかる時間を短縮するのに役立ちます。
CSSプロパティをさまざまな方法で持っている人はたくさんいますが、当社ではすべてのプロパティをアルファベット順に並べることに同意しています。 これは、他の人が書いたコードを使用する必要がある場合に役立ちます。 プロパティがアルファベット順に配置されていないcssファイルを使用する必要があるたびにイライラします。
3.グループ化
CSSファイルを整理して、探しているオブジェクトとそれに関連付けられたプロパティが互いに隣り合うようにする必要があります。コメントを使用することも効果的です。 グループ化方法の例を次に示します。
/*****Reset*****/
Remove margin and padding from elements
/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
/*****Generic Classes*****/
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently
/*****Basic Layout*****/
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
/*****Header*****/
Define all elements in the header
/*****Content*****/
Define all elements in the content area
/*****Footer*****/
Define all elements in the footer
/*****Etc*****/
Continue to define the other sections one by one
コメントを使用して同様の要素をグループ化すると、必要なオブジェクトとそのプロパティをすばやく見つけることができます。
4.シーケンス
選択したコードの記述方法に関係なく、それに固執します。 私はすでに、1行と複数行のコードを記述する正しい方法を選択することに関するCSSの議論にうんざりしています。 誰もが自分の意見に対する権利を持っているので、あなたにとって最も便利なものを選択し、それをすべてのCSSファイルで使用します。
個人的には、両方の方法を組み合わせて使用しています。 セレクタに4つ以上のプロパティが含まれる場合、複数の行に分割します。
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
5.正しく起動する
ページレイアウトが完了するまで、CSSスタイルの記述を開始しないでください。
CSSファイルを作成する前に、開始ボディタグから終了タグまでのすべてのページレイアウトを記述します。 追加のdiv、id、クラスは追加せず、ヘッダー、コンテンツ、フッターなどの特徴的なブロックのみを追加します。
CSSセレクターの継承を使用して子を配置し、要素にクラスとIDを自動的に追加しないでください。 主なことを覚えておいてください。CSSには、適切にフォーマットされたドキュメントがなければ費用はかかりません。
これは、より良いコードを書くのに役立ついくつかのヒントの完全なリストではありません。 どのようなヒントを使用しますか？