手打ちコーディング初心者におくるメンテナンス性の高いHTML+CSSコーディングを行うための15のTips
2010/12/21, 10:00:10
個人的にまとめる記事が全部15個になるのは仕様です。
今日は手打ちコーディングでメンテナンス性の高いシンプルなコーディングの際に心がけたいルール15個をご紹介します。
1. HTMLタグの種類から指定する（CSS）
#content .error {
margin-left:10px;
}
ではなく
div#content p.error {
margin-left:10px;
}
とID、classを指定しているタグを前に書くことで指定している箇所が見つけやすくなり、かつ指定のバッティングを回避することができます。
2.positionは極力使わない（CSS）
スタイリッシュなデザインにpositionは欠かせませんがブラウザのサイズを変えたらデザインが崩れるなどの支障をきたすためあまりオススメしていません。
個人的にどうしても使う時はヘッダー部分のデザインのY軸（縦）に対してのみ使います。
理由はヘッダーのY軸なら文字サイズも固定することが多く、デザインが崩れる可能性が低いからです。
3.使うCSSを制限する（CSS）
それぞれブラウザによってタグの解釈が違うので、当たり前の話と言えば当たり前の話なのですが使うタグを増やすからブラウザ間での誤差が出やすい確立が増えるので先ほどのposition含め指定するタグを極力減らせば自然とハックをする回数も減ってくるかと思います。
4.<div>タグを乱用しない（HTML）
時々divタグを乱発しているソースを見かけますが、非常に見にくいですよね。（＾＾；
divとspanは要素を箱として扱い時以外は極力使わないように意識したいトコロです。
5.装飾したCSSありきでなく文章の意味からHTMLを書く（HTML）
これも多いのですがすでに指定されているCSSがあるからそのHTMLタグを使うのではなくてあくまで文章としてHTMLを構成してそこに装飾するためにCSSを記述するクセを見につけましょう。
6.複数のclassを指定する（HTML）
<div class="w500box faq"> ～～～～～ </div>
これも意外にご存じの方が少ないのですがclassは複数指定することが可能です。
例えば上記の場合、「w500box」で指定された命令とさらに「faq」で命令した2つを組み合わせることが可能です。
7.<div>タグの後にコメントを付ける（HTML）
<div id="content"> ～～～～ </div> <!-- #content -->
とコメントを書くだけで可読性が抜群に上がります。お試しアレ。
8.下層ページからコーディングする（CSS）
下層ページからコーディングすることでTOPページは下層ページの差分だけコーディングすればよくなります。
9.連番ID、classは使用しない
これも時々みかけるのですが
<div id="content"> <div id="content2"> <div id="content3"> ～～～～～～ </div> </div> </div>
はメンテナンス時に意外に苦戦する要因となるので連番のID、class指定は控えましょう。
10.CSSの記述を統一する（CSS）
div#content {
margin-left:10px;
margin-bottom:20px;
background-image:url("/images/aaa.jpg");
}
div#main {
margin:0 10px 10px 0;
background:url("/images/bbb.jpg");
}
というようなコーディングではなく記述方式を統一しましょう。
最後の方で「アレ、CSS合ってるのに効かない！」の原因の多くはコレかと思われます。（経験談）
11.CSSファイルは1ファイルが望ましい、分ける場合は明確なルールを（CSS）
むやみやたらにファイルを分ける方はいないと思いますが、少々長くても出来れば1ファイルで収めた方がファイルの読み込みが速く、後でそのファイルを検索するだけで記述箇所を特定しやすいので1ファイルにした方が良いかと思います。ボリュームのあるサイトで必要な場合は「グローバル設定」、「テンプレート設定」、「ローカル設定」のように明確なルールを設計する必要があるかと思います。
12.全ページ共通のclassを先に指定する（CSS）
これはすでに多くの方が実践されているかと思いますが、floatした画像に余白を開けたいなど、全ページで使用する可能性のある命令は決まったclassを指定して先に記載しておきます。
13.段組みを行う（HTML）
段組みとはタブで見やすくコーディングすることです。
<div id="content">
<div id="point">
<h3>～～～～～～</h3>
<p>～～～～～～</p>
</div>
</div> <!-- #content -->
14.「!important」記述は極力避ける（CSS）
「!important」記述は指定したCSSを優先する指定方法ですが、便利だからと言って多用し始めると破綻の原因になります。
「!important」を使わずとも指定できるコーディングを習得しましょう。
15.レイアウトを構成するdivから記述する（CSS）
例えばヘッダー部分のコーディングであれば
<div id="header"> <h1>サイトタイトル</h1> <p>サイトの説明文</p> </div>
とHTMLでコーディングし、h1はページに1つしか出現しないので
h1 {
font-size:12px;
}
とついつい記載してしまいがちですが、
div#header h1 {
font-size:12px;
}
と記載した方が確実にCSSを指定でき、かつ後でHTMLの追跡をするのに非常に楽になります。
参考になりましたでしょうか。
Related posts
Comments
質問、反論なんでもOKです。お気軽にコメントをください。
※コメントは承認後、反映されます。
Trackbacks & Pingbacks