スタイルシートのメリットを失わせるクラス名とは
さて、前ページでご紹介した例の何が問題なのかを考えてみましょう。 例えば、「文字サイズを小さくしたい箇所には、smallクラスを使う」と考えて、以下のように記述したときを考えます。
font-size: 80%;
}
これで、HTMLを次のように記述すれば、その箇所の文字サイズが小さくなりますね。
もし、後日、文字サイズをもうちょっと大きめにしたいと思った場合は、スタイルシートを書き換えるだけで済みます。 例えば、以下のように書き換えれば、80％だった文字サイズがすべて85％に書き換わります。
font-size: 85%;
}
便利ですね。これは、スタイルシートの大きなメリットです。
「全然スタイルシートのメリットが失われていないじゃないか。」と思われたかも知れません。
では、次の場合を考えて下さい。
「文字サイズを小さくした箇所を、緑色にしたい。」
この場合、どうされますか？
当然、スタイルシートに文字色を緑色にする記述を加えますね。
font-size: 85%;
color: green;
}
さて、お気づきでしょうか。ここに、大きな問題点が２つあります。
- クラス名「small」が内容を表せなくなった。
- 緑色にしたくない箇所も緑色になってしまう。
これによって、スタイルシートが分かりにくく、使いにくくなってしまいます。
■クラス名「small」が内容を表せなくなった
smallクラスのデザインは、「文字サイズを小さくして、文字色を緑色にする」のですから、 クラス名がデザイン内容を十分に表せていません。 これでは、紛らわしくて、うまく使えなくなる可能性があります。
■緑色にしたくない箇所も緑色になってしまう
「文字サイズを小さくしたい箇所にsmallクラスを使う」という基準でスタイルを適用してきた（＝HTMLを記述してきた）のですから、 「文字サイズを小さくしたい箇所」のすべてが必ずしも「緑色にしたい箇所」とは限らないでしょう。 「緑色にはしたくないけど、文字サイズは小さくしたい」箇所がある場合（もしくは、将来的にそういう場所が出てきた場合）に、困ってしまいます。
これらの問題を解決するには、smallクラスの他に、新しく smallgreenクラスを加えて、HTMLを書き換える…という方法しかなくなってしまいます。 非常に面倒ですね。 何より、デザインを変更するためにHTMLも書き換えなくてはならないので、 「HTMLを書き換えることなくデザインを変更できる」というスタイルシートの大きなメリットが失われてしまっています。
スタイルシートのメリットを活かせるクラス名とは？
さて、それでは、どのようなクラス名なら、上記のような問題を発生させず、スタイルシートのメリットを保つことができるでしょうか？
