コーディング犬に聞く：「class名ってどう付ければいい？」
HTMLやCSSを書き始めた頃。
誰もが一度はやるのが、
<div class="red">や
<div class="big">みたいなclass名です。
動くから問題ない。
そう思うかもしれません。
でも数か月後。
自分で見返した時にこうなります。
「これ何のクラスだっけ…？」
今回は、
「class名ってどう付ければいいの？」
という疑問をコーディング犬に聞いてみました。
Q. class名って何のためにあるの？
「要素を区別するためだよ！」
例えば、
<div class="service">なら、
サービス紹介エリア
だと分かります。
CSS側では、
.service{
}として装飾できます。
つまりclass名は、
「住所」
みたいなものです。
Q. 初心者がよくやる失敗は？
「見た目で名前を付けること！」
例えば、
<div class="red">
<div class="big">
<div class="left">などです。
これの何が問題かというと、
後から変わるから。
例えば、
<div class="red">なのに、
デザイン変更で青になったら？
<div class="red">なのに青。
意味不明です。
Q. じゃあ何で付けるの？
「役割で付けよう！」
例えば、
<div class="service"><div class="news"><div class="contact">などです。
これなら色が変わっても、
問題ありません。
Q. 具体例を見たい！
例えば、
こんなカード。
<div class="card">
<h2>タイトル</h2>
<p>説明文</p>
</div>これを発展させると、
<div class="service_card">
<h2 class="service_title">
タイトル
</h2>
<p class="service_text">
説明文
</p>
</div>になります。
見ただけで、
何の要素か分かります。
Q. 日本語はダメ？
「基本は英語がおすすめ！」
例えば、
<div class="お知らせ">でも動きます。
ただし、
チーム制作や実務では、
<div class="news">が一般的です。
Q. 長すぎるclass名は？
「長すぎもNG！」
例えば、
<div class="top_page_main_service_area_box">みたいなもの。
読みにくいです。
適度に、
.service
.service_card
.service_titleくらいが見やすいです。
Q. 短すぎるのもダメ？
「何か分からない！」
例えば、
<div class="a">
<div class="box1">
<div class="test">数か月後。
100%後悔します。
未来の自分が、
「なんだこれ？」
となります。
Q. BEMって何？
「class名のルールだよ！」
例えば、
<div class="service">の中に、
<h2 class="service__title"><p class="service__text">を書く方法。
最近の制作現場では、
よく使われています。
Q. BEMは覚えた方がいい？
「実務ならおすすめ！」
ただし初心者はまず、
「分かりやすい名前」
を意識すればOKです。
いきなりBEMだけ覚えようとすると、
逆に混乱します。
Q. class名を考えるコツは？
「この要素は何の役割？」
を考えること。
例えば、
見た目で考えると、
.big
.red
.leftになります。
役割で考えると、
.news
.service
.contact
.footerになります。
後者の方が、
圧倒的に分かりやすいです。
Q. プロはどう付けてる？
「誰が見ても分かる名前。」
例えば、
.news_list
.news_item
.news_titleなど。
読んだだけで、
構造が理解できます。
綺麗なHTMLは、
綺麗なclass名から始まります。
まとめ
class名を付ける時は、
見た目ではなく、
役割で考えることが大切です。
例えば、
❌ 悪い例
.red
.big
.left⭕ 良い例
.news
.service
.contactそして、
- 分かりやすい
- 短すぎない
- 長すぎない
- 英語で統一する
これを意識するだけで、
コードの読みやすさは大きく変わります。
未来の自分やチームメンバーが見ても分かるコードを書く。
それが綺麗なコーディングへの第一歩です。
コーディング犬との約束です。
