スタイルシートを使いにくくするクラス名(3ページ目)

スタイルシートのメリットを活かせるクラス名とは？

どのようなクラス名なら、スタイルシートのメリットを失わずに済むでしょうか？
それは、

デザイン内容ではなく、用途をクラス名にする。

ということです。

「文字サイズを小さくしたい」場合、「なぜ、文字サイズを小さくしたいのか？」を考えてみて下さい。 すると、「補足説明のため」、「図のキャプションのため」、「ナビゲーションリンクのため」など、様々な理由（用途）が思いつくはずです。

そして、その「用途」をクラス名にします。例えば、次のような感じです。

「smallクラス」という1つのクラスでまとめていたときより記述量が増えていますが、 こう記述しておけば、前ページまでにご紹介したデメリットはなくなります。

例えば、「補足説明は、文字を小さくした上で緑色で表示したい。」と思った場合は、次のように記述することになるでしょう。

こうすると、同じように文字を小さくしている箇所でも、「図のキャプション」や「ナビゲーションリンク」のデザインは当然変わりません。

さらに、「キャプションの上の余白を詰めたい」・「リンク文字はもう少し大きくしたい」という場合でも、 次のようにスタイルシートを書き換えるだけで実現できます。 HTMLを書き換える必要はないので、スタイルシートのメリットが活かされています。

このように、スタイルの「用途」をクラス名にしておけば、前ページでご紹介したようにスタイルシートのメリットを失ってしまうことはありません。 また、新しくHTMLを記述する際にも、どのクラスを使えばいいのかが分かりやすくなります。

スタイルシートのメリットは、HTMLにデザインを含まずに済むこと

スタイルシートを使うメリットは何でしょうか。
スタイルシートは、HTMLで実現できる以上の様々な装飾を施すことができます。 しかし、最も重要なメリットは、HTMLからデザインを分離できることです。
それによって、

• HTMLが構造だけを表現するシンプルなものになる
• HTMLを修正することなく、デザインを変えられる

といったメリットが得られるわけです。

クラス名に small や green などのデザイン的な名称を使ってしまうと、 HTML中に「 class="small" 」や「 class="green" 」などのデザイン名を記述することになります。 つまり、HTMLからデザインを分離できていないことになりますね。
これでは、スタイルシートのメリットが失われてしまうのです。

おわりに

今回ご紹介したように、クラス名にデザイン的な名称を使っているサイトは、かなりたくさんあります。
特に、デザインを考えつつHTMLを記述していると、ついついそうなってしまうのでしょう。 気持ちはよく分かるのですが、後々のデザイン変更やメンテナンスを考え、スタイルシートのメリットを最大限に活かすには、 クラス名にはデザイン的な名称を使わないよう意識することが大切です。

HTMLとスタイルシートを同時に記述していく場合でも、デザインではなく、構造を意識して記述していくとよいでしょう。 「どんなデザインにするか？」ではなく、「そこで何を表すのか？」を考えると、うまくスタイルシートを活用できます。

関連記事：

• スタイルシートの基礎力をチェック　スタイルシート基礎クイズ
• スタイルシートのクラス名などで問題になることも!?　大文字・小文字の違いに注意！
• 文字間隔を空白で調節してはダメ！ スタイルシートで調節しよう
• スタイルシートでページ周囲の余白を微調整
• 初心者応援講座　スタイルシートを使う3つの方法