どうも、7noteです。今回はcssで使ってはいけないclass名、使わない方がいいclass名について。

ホームページ制作でclassは多くの場面で使用しますが、使えなかったり、使うのをやめておいた方がいいclass名があります。誰かに教えてもらわないとなかなか知らないこともあるのでわかりやすくまとめてみました。

使ってはいけないclass名

1.[アルファベット文字][数字][ハイフン（-）][アンダースコア（_）]以外の文字はダメ

正確にはこのように定義されています。

文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン（-）およびアンダースコア（_）のみ使える。

なので、これらの文字以外はclass名で使用することはできません。アルファベットか数字かハイフン(-)かアンダースコア(_)以外は使わないようにしましょう。使う時はこの4種類だけで「class=”abc_01″」みたいなclassをつけるようにしましょう。

2.頭文字に、『数字[0-9]、2つのハイフン[–]、ハイフンの直後の数字(-[0-9])』はダメ

例を書くとこんな感じになります。

使ってはいけないclass名.html

<!-- 使ってはいけないclass名の例 -->
<p class="1point">ワンポイントアドバイス</p> <!-- 頭文字に数字ダメ -->
<p class="--ready">準備</p> <!-- 頭文字にハイフン2個ダメ -->
<p class="-1go">出発</p> <!-- 頭文字にハイフン&数字ダメ -->

使わない方がいいclass名

ここから先はルールで決まっているわけではないが、避けた方がいいclass名の付け方について紹介していきます。

1.既存の要素名（タグ）やid名と同じclass名は避ける

単純にややこしいから。

2.見た目のままのclass名は避ける（これけっこう大事）

赤文字の箇所に対してストレートにclass=”red”とつけてしまうとどうなるか。

「赤文字になっているとこ、赤やめて下線に変えて〜。」

なんてことになったら悲惨です。クラス名も一緒に変えなければならなくなってしまいます。

もちろんredとつけた方がいい場面もありますが、その赤文字の意味が強調させたいという意図であれば、英語の強調という意味のemphasisなどをつける方が綺麗なclass名と言えるでしょう。もしくはもっとわかりやすい英語でpointなどをつけるなど、とにかく見た目通りのclass名はつけないようにしましょう。
class名は意味や構造を考えてつけるようにしましょう！

3.他の人が見たときに意味が理解しにくいclass名は避ける

上の2.で「emphasis」をつけたほうが・・・とか自分で書いてますが、チームでソースを触る人全員が英単語を理解できているかと言われると怪しいことが多いと思います。基本的に英語でclass名をつけることが多いですが、あまりにも聞き慣れない単語は素直に日本語のclass名をつけてもいいかなと考えています。