CSSのクラス名について考えてみる

スタイルシートの使い方にだいぶ慣れてきたjyunzyです:kaoemoji5:
(いい加減慣れないといけませんが:ase1:

今回はスタイルシートに使うクラス名やID名について考えてみようかと思います。

 

デザイン内容をクラス名にするのはよくないかも?

例えば、文章中に赤い文字の部分を作って強調させたい事があったとします。
その時に、下のようなクラス名にしまうのは良くないです。

span.red {
    color:#B42F00;
}

上の例では、「文字の色を赤にする」というスタイルに対して、「red」というクラス名を付けています。
一見分かりやすいように思えますが、あとで「赤じゃなくて青に変えたくなった」という時に
この名前ではムジュンになりますよね。

かといって、
めんどくさいから、名前はredのまま中身を青にしちゃおう:orooro:
とするのは余計な混乱を生みます。

あとで他の人がこのスタイルシートを使った時に、赤の色になるはずが青になってしまい
「なんじゃこりゃ~!」となるかも知れませんね:roll:

 

分かりやすいクラス名とは?

では修正が出ても対応しやすく、他の人からも誤解を招かないクラス名ってなんでしょうか?

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

span.emphasis {
    color:#B42F00;
}

上の例のようなemphasis(強調)というクラス名なら、たとえ色や文字の大きさが変わろうが意味は
変わらないですよね:wink:

クラス名を付ける時はその場しのぎな名前ではなく、「どこでどんな用途で使うのか」を考えてみては
いかがでしょうか:kaoemoji3:

トラックバックURL

コメントを残す

メールアドレスが公開されることはありません。