2017年07月11日

Webデザインメモ

コーディングの手間を防ぐ、チェック項目2点

コーディングはスピードが勝負です。
しかし、思いがけない箇所でスタイルが破綻したために修正が入ったり、作業が余計にかかることがしばしばあるかと思います。


今回は、そのような「余計な作業」がでてしまう原因の一部である以下の2点をチェックしてみてください。

-----------------------------------------

1) HTMLに、依存した記述をしていないか

例えば以下のh1を赤い文字色にするために、以下のように記述したとします。

-- HTML --

<div>
<h1>タイトル</h1>
</div>


-- CSS --

div h1 {
color: red;
}


もし、途中でhtmlの構造が変わり、h1がh2になった場合どうなるでしょうか。
htmlだけでなく、cssも修正する必要があり、その分無駄な修正作業が発生してしまいます。

そうならないためには、htmlのh1に、例えば「tl_txt」など、class名を付けると良いです。
そうすれば、たとえh1に変更が入ったとしても、class名の変更が入らない限りcssの修正が不要になります。


2) スタイルを取り消しすような記述をしていないか

一度定義したルールを、あとから0やnoneといった値を記述することで上書きしていませんか?

以下のパターンでは線などを「取り消す」ためのスタイルです。

-- HTML --

<h2 class="title no-border">見出し</h2>


-- CSS --

.title {
margin-bottom: 10px;
border: 1px solid #000;
padding: 10px;
}
.no-border {
margin-bottom: 0;
border: none;
padding: 0;
}


それに対し、次のパターンでは線などを「追加する」ためのスタイルです。
-- HTML --
<h2 class="title main_tl">見出し</h2>

-- CSS --

.title {
padding: 10px;
}
.main_tl {
border: 1px solid #000;
margin-bottom: 10px;
}


上2つのソースを見ると、ソースを記述する量に差があることがわかります。

スタイルを記述するときには、取り消すのではなく、追加していくようにしましょう。


以上です!


私は特に、1)をやってしまうがために、ゴリ押しで2)をしてしまうことが多かったような気がします・・・

上2点に気をつけることで、修正しやすくなり、メンテナンス性のアップにつながります。是非参考にしてみてください。