読者です 読者をやめる 読者になる 読者になる

WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

セレクタの書き方いろいろ

こんにちは。3年生の熊﨑です。誰もが一度は考える、セレクタの書き方について紹介します。

セレクタの書き方

普段、みなさんはどのようにidやclassの名前を付けていますか?

たとえば、ヘッダーの中にインナーを作る時に「headerinner」と名前をつけるとします。「header」と「inner」が隣合わさって読みづらいですね。

そういう時、あなたはどうしますか?

 

書き方の種類

セレクタの書き方にはいくつか種類があります。

  • header_inner  →  アンダースコア(アンダーバー)で区切る
  • header-inner  →  ハイフンで区切る
  • headerInner  →  複合語の先頭は大文字にして区切るが、初めの文字は小文字にするキャメルケース

有名な3つをあげてみました。この3つのどれかの書き方をしているのではないでしょうか。

 

それぞれのメリット、デメリット

アンダースコアで区切る

  • ダブルクリックで選択したとき一気にセレクタ名が選択できる
  • 区切りがわかりやすい
  • 一部の古いバージョンのブラウザで無視される

ハイフンで区切る

  • 区切りがわかりやすい
  • ダブルクリックで選択したときは単語ごとに選択される
  • CSSプロパティにハイフン区切りの物が多く、混ざる

キャメルケース

  • ダブルクリックで選択したとき一気にセレクタ名が選択できる
  • 文字数が少なくて済む
  • 区切りがわかりにくい

それぞれメリットデメリットがあります。

古いバージョンのブラウザで無視されるのはかなり古いものですので、対応する必要がない場合は考えなくてよさそうです。

 

どれを選ぶのがよいのか

人それぞれ読みやすいには差がでますので正直なところ好みです。

私はもともとアンダースコアで区切っていましたが、最近はキャメルケースで書いています。初めは読みにくいと思いましたが、使い続けていると区切られすぎず無駄がなく良いなと感じるようになりました。

一番大事なのはどれを選んでも「すべて揃えること」です。ひとつのサイトの中で、アンダースコア使ってみたり、ハイフン使ってみたり、キャメルケースを使って見たり・・・と混ぜることが一番読みにくくなる原因です。メリット・デメリットを見て、好みの物を一つ選び統一してみてはどうでしょうか。