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

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

—————————————–

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;
}

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

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

以上です！

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

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