トワイライツ・ノーツ

日記と本と、時々Web

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

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


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



CSS


.al-cnt {

text-align: center;

}


.mgt30 {

margin-top: 30px;

}


.attention {

color: red;

font-weight: 700;

}


.flL {

float: left;

}


.flR {

float: right;

}



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



見出し2



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


で、この形式で今日は1ページ作った訳なのですが……何だか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に手を入れるのが気が進まない訳で……この辺りのバランスの取り方が難しいです。