スタイルシートを使いにくくするクラス名

スタイルシートにどんなクラス名を付けていますか？

特定の箇所にのみスタイルを適用させるために、スタイルシートでは「クラス（class）」や「id」が使えます。 これらには、自由な名称を付けることができますが、みなさんは普段どんな名称を付けていますか？

クラス名やID名の付け方によって、スタイルシートの読みやすさがずいぶん異なります。 また、名称の考え方によっては、スタイルシートのメリットを活かせない可能性もあります。 今回は、分かりやすい名称を付けて、うまくスタイルシートを活用する方法をご紹介致します。

デザイン内容をクラス名にしてはダメ

そのクラスでデザインできる内容をそのままクラスの名称にしてはいませんか？ 例えば、次のような感じです。

上記の例では、「文字サイズを80％にする」というデザインを施すスタイルに対して、「small」というクラス名を付けています。

この場合、「文字サイズを小さくしたい箇所には、smallクラスを付加する」ということになり、一見分かりやすいようにも思えます。 しかし、この書き方では、せっかくのスタイルシートのメリットが失われてしまっています。

問題点をご紹介する前に、もう1つ悪い例をご紹介しておきましょう。

上記の例では、「文字サイズを90％にする」スタイルに「small90」というクラス名を、 「文字サイズを80％にする」スタイルに「small80」というクラス名を付加しています。

先ほどよりも、さらにスタイルシートのメリットを失わせる書き方になってしまっています。

このように記述してしまっていませんか？
もし、このように記述しているなら、スタイルシートをまったく活かせていないといえるでしょう。

これらの記述方法の何が悪いのか、お分かりですか？
詳しい説明は、次のページで。

スタイルシートのメリットを失わせている理由とは？ >>