HTMLとCSS。
よく、レイアウトと構造の分離、というのを見ます。
HTMLでは構造を記述し、CSSでレイアウトを記述する、というものですね。
それを、CSSでもやってみよう、というのが今回の記事の主旨です。
どんなことかというと、今まで自分は
「このタイトル要素の背景はこれで、余白はこれ」
という、「その要素のスタイル」を記述していました。
でも、タイトル用の記述であっても（たとえば左にアイコンをつけるとか）
他の、タイトルではないところでそのアイコンをつける必要が出てくる場合がありますよね。
でもタイトル用に定義されたスタイルを適用するといらない余白まで定義されていて
うまく使えない場合とかがあります。
そこで、装飾に使うスタイルとレイアウトに使うスタイルとで完全に分離してしまってはどうか、
というのを考えたわけです。
（すでにやってる人が多いかもしれませんが・・自分は最近気づいたので(;´д｀)）
たとえば、アイコンをつけるクラス「.ico」と背景に色をつけるクラス「.bg」があるとします。
そして、タイトル部分に「#title」をつけます。
このタイトルの位置については「#title」で定義し、それ以外の付加要素（アイコンとか背景色とか）はすべてクラスで指定します。
<h1 id="title" class="ico bg">test</h1>
という具合に。
他にborderをつけたい場合はクラスにそれを追加してやります。
こうすることで、使い回しを容易にし、かつその要素が一体どんなスタイルで表示されるのか、
コード上からでも大体の状態を推測することが可能になります。
これらのことから、IDにはmargin、padding、floatなどのレイアウトに関わる記述を、
クラスにはborder、background、colorなど装飾に関わる記述を、というふうにわけることができます。
もちろん、「.font_red」のようなスタイルはなしです。あくまで使用する箇所がわかるクラス名にします。
たとえば、「.ico_help」などのように、そのクラスがなにかを単体である程度推測できるものです。
また、デバッグ用のスタイルを別途定義しておくとコーディングがスムーズに行くかもしれません。
「.floatLeft」や「.bdr1px」などを用意しておいて、クラス名に追加するだけで
すぐに状態の変化を確認できます。
いちいち直接styleに追加したり、該当のスタイルに追加、なんてことがいらなくなります。
クラスを複数指定することで、HTML的に長くなって、CSSだけでレイアウト変更、なんてことがむずかしくなってしまうデメリットがありますが、あまりリニューアルがなく、複数回使う要素がかなりの頻度で出てくる場合のサイトには向いてる記述かなーなんて思います。
