検索
カレンダー
2020年4月
« 4月    
 1234
567891011
12131415161718
19202122232425
2627282930  
ブログメニュー
Amazon検索
キーワード:

スタイルシートのクラス名の命名規則

2006年12月11日

稀に、HTML中に”red”などという名前のクラス名を使ったサイト見かけることがあります。このように見た目をクラス名やID名にすると変更に弱くなり、スタイルシートの適用によって得られる利益が半減してしまうように思います。

例えば、仕事でWebページを製作していたとします。スタイルシートでデザインを別途定義できるようにし、変更にも強くなっています。ですがエラー メッセージに対して適用するクラス名は”error”ではなく”red”になっています。完成が近づいたある日、あなたの顧客や上司が「エラーメッセージ の文字は赤色でなく黄色にしないといけない」と要求してきた場合、変更に対する仕事量はどのくらいになるでしょうか。

全てのHTML中の”red”クラスを”yellow”とするなら、全てのHTMLを見直す必要があります。全てのHTMLをひとつずつ開いて”red”を検索し、それがエラー文字列に対して適用されていれば”yellow”に変更するという作業になるはずです。

もしくは、下のようにクラス名が”red”なのに内容は”color: yellow;”とするという方法もあります。

red {

    color: yellow;

}
この方法を採るとクラス名と内容が一致していない保守しづらいサイトになってしまいます。

さらに悪いことに、エラー文字とは関係なく単に赤色文字列を表示したい場合に”red”クラスを使っていれば、その部分も黄色に変更されてしまいます。これを防ぐためにはやはり全てのHTMLをチェックする必要があるでしょう。

もし、エラーメッセージに対して適用するクラス名を”red”ではなく、”error”等、見た目ではなく意味をクラス名にしていればどうなるでしょうか。スタイルシートファイルの”error”クラスを、

error {

    color: red;

}

から
error {

    color: yellow;

}

に変更するといった作業だけで済むはずです。

これは”left”等というクラス名にも当てはまります。leftと名づけられたボックスが、いつまで画面の左側に表示されているでしょうか。

コメントはまだありません »

コメントはまだありません。

TrackBack URL : http://www.meibinlab.jp/nishijima/archives/61/trackback

コメントする