cssの部品の使いまわしについて

今日の授業ではスタイルの使い回しについて勉強しましたが、いまひとつ消化しきれていないので覚書きしておきます。

 使い回しというのは例えば、

■CSS


.al-cnt {

 text-align: center;

}


.mgt30 {

 margin-top: 30px;

}


.attention {

 color: red;

 font-weight: 700;

}


.flL {

 float: left;

}


.flR {

 float: right;

}

こんな感じの非常によく使う部品をあらかじめ用意しておいて、html中で

見出し２

といった感じで使い回すことです。

で、この形式で今日は１ページ作った訳なのですが……何だかhtmlの方にスタイルを書き込んでいるのとあまり変わらない気がして、どうも可読性や保守性が悪くなる気がするのです。

■html



左にfloatさせたい箱







右にfloatさせたい箱<





■CSS

.widebox {

 width: 400px;

 margin: 10px;

 background: #eee;

 border: 1px solid #999;

}

こういった感じのhtml・CSSがあるとして、使い回しの考え方を用いるならこうです。

■html



左にfloatさせたい箱







右にfloatさせたい箱<





■CSS

.flL {

 float: left;

}


.flR {

 float: right;

}


.widebox {

 width: 400px;

 margin: 10px;

 background: #eee;

 border: 1px solid #999;

}

これは確かにすっきりするような気がするのですが、htmlはなるべくシンプルでcssで全部指定した方が可読性はいいのかなあ……という風にも思えます。下のような感じです。

■html



左にfloatさせたい箱







右にfloatさせたい箱<





■CSS

.wideboxL, .wideboxR {

 width: 400px;

 margin: 10px;

 background: #eee;

 border: 1px solid #999;

}


.wideboxL {

 float:left;

}


.wideboxR {

 float: right;

}

こちらだと、CSSを見るだけでどういう指定になっているかわかりますし、htmlのタグに指定するクラスがすっきりします。一回ニ回ならともかく、たくさんあるとコードが長くなりますが……。

まだ慣れてないだけで、実は使い回しをした方が可読性が良いのかも知れませんが、何となくhtmlに手を入れるのが気が進まない訳で……この辺りのバランスの取り方が難しいです。