【web】個人的にメンテナンスしやすいhtmlとcss
最近仕事で人の書いたソースやいじった後のソースを見ることが増えたので、自分用メモです。
ソースのインデントは極力いれない
インデントが綺麗に整ったhtmlソースは見やすいのですが、複数人でさわったり、あるいはその後コードの修正が入る可能性が残る限り、むしろインデントはない方がいいなあと思いました。
というのも……
- 要素の入れ替えや移動が発生するとインデントを整えることに手間がかかる
- 人によってはソースをいじってずれたインデントを整えずにそのままにしてしまうので、結果として年月とともにコードが汚くなっていく
ということが発生するのです。
使うとしてもせいぜい、
■リスト
<ul>
<li>要素1<li>
<li>要素2</li>
<li>要素3<li>
</ul>
■テーブル
<table>
<tr>
<th>見出し1</th>
<td>要素1</td>
</tr>
<tr>
<th>見出し2</th>
<td>要素2</td>
</tr>
</table>
……程度かなあ、と感じています。
それぞれの要素の区切りは、改行でやっていくのが楽に思います。
クラス・id・画像ファイルは極力固有の名前をつける
要素の順番の入れ替えって本当によく発生するのです。例えば、サイドメニューやグローバルナビボタンの順番をちょっと入れ替えるとか。そんな時に画像が、
- btn01.jpg
- btn02.jpg
- btn03.jpg
という感じで用意されていると……可読性を維持しようと思うと、この画像の名前から変更していかないといけないので、大変手間です。
でも、
- btn_ok.jpg
- btn_no.jpg
- btn_back.jpg
といった感じで固有の名前がついていると、並び替え、追加、削除のいずれもしやすくて楽です。
クラスやidも同様に、番号ではなくて固有の名前で作っていると後々が楽です。
とにかく急いで作る時は名前を考えるのが面倒でやってしまいがちですけど、後々を考えると番号で作るのは却って手間です。
tableタグはなるべく使わない方が楽
上でtableタグのことを書いているのですが、ソースコードとしてtableタグって見づらいし修正もしにくいです。
頻繁にtableを手作業で書き換えないといけないサイトは、結構げんなりします……。
昔のホームページだと、ページ全体をtableで作るっていうのも結構あったようですが、読み込みも重たくなりますし、メンテ性もよろしくないので、できる限りdiv、ul、dl、あたりで代用していきたいところです。
間隔調整に<br />を使わない
文章の中での改行なら改行タグは必要ですが、例えば要素の最後に<br /><br /><br />という形式で間隔調整をすると……修正した時うっかりひとつでも消したりしてしまうと、それだけで各要素の間隔が変わってしまいます。
CSSでmarginなりpaddingなりを指定すると後々楽です。
インラインCSSは極力使わない
単純にこればかりはかなりメンテナンスしにくくなるので避けたいところ……。
ちなみにこういうのです。
<p style="color:red;">インラインcssの例</p>
こういうのがソースコード中に大量にあると……時間さえあればまとめるんだけど……と思いながら仕方がなくコピペする羽目になります。
階層構造や基本のものの名称は統一する
画像ファイルはimgファイルに、画像のファイルはこういう名前でこう管理、基本のcssはstyle.cssに、クラスやidの命名規則は統一する……などなど、やりやすい方法や流儀はそれぞれあると思いますが、統一って本当に大事です。
それもなるべく早い段階でやっていかないと、メンテナンス性の悪いサイトが量産されてしまいます。
という訳で、こうだったらメンテしやすいのになあ……ということを簡単に書き出してみました。
自分がまっさらな状態からコーディングする時も、後でいじることはきちんと頭におかないといけないなあ……という意味でもちょっと気を引き締めています。
余談：だが私はコピペしている
メンテのしにくさを後のツケにしているようですごく、すごく心に引っ掛かるものはあるのですが……時間がない時はコピペもやむなし、という感じです。
他に影響していないかも調べる必要がありますし、後々のソースやファイルの整理ってかなり大変です。
もっとスキルが上がれば何かのついでにちゃっちゃっちゃと直しもいけるのでしょうが、いかんせんそこまでの時間が捻出できていない感じです。
とはいえ、できることからコツコツやっていきたいところではあるので、ツールを探したり勉強はしていこうと思っています。
