キャメルかスネークかハイフンかそれが問題だ

CSS on 19 Feb , 2015

自分の中でwebアプリ開発でよく悩むシリーズの1つにcssのセレクタ名とファイル名がある。

名前をキャメルケースにするかスネークケースにするかハイフンにするかです。

/* キャメルケース */
<div class="gNav">

/* スネークケース */
<div class="g_nav">

/* ハイフン */
<div class="g-nav">

自分なりに考えて先に結論から言うとケースバイケース!

あっちの有名なライブラリはハイフンか、なるほどね。
いやあっちのフレームワークはキャメルでないといけないのなど、ほんとにバラバラかつ、ケースバイケースなのであります。
とは言え、毎回毎回基準もなくその場で適当に決めるのも気持ち悪ので少しまとめたいと思います。

まずよく遭遇するのが、、

cssのセレクタ名とファイル名の命名規則が違うとめんどくさい

どういうことかと言うと、グロバールナビゲーションのクラス名にハイフン区切りでg-navとつけたとして、
そこに使う画像ファイル名をg_nav_img_1とキャメルで名前をつけてしまうと同じブロックのパーツなのにハイフンとアンダースコアで名前が違うという現象が発生します。
また、一瞬、ほんの一瞬ですがハイフン化アンダースコアか混乱することもあります。

そこで、、

cssのセレクタ名とファイル名の命名規則は統一したい

統一すれば深く考える必要もなくガシガシ制作に集中できます。
そこで、業界を引っ張る方々の命名規則を調べてみました。

まずは

「Google HTML/CSS Style Guide」

最大にして最強、インターネット界の巨人Googleがcssについて定めたところによると

「IDやクラス名の別々の単語はハイフンで繋ぐ。」

Googleがそう言うならそうなんでしょう、しかし落ち着いてほかも見てみましょう。

WordPress

このブログもワードプレスで書いています。
ワードプレスのデフォルトテーマであるTwenty Fourteenのメインコンテンツのセレクタを見てみると

<div id="main" class="site-main">
<div id="main-content" class="main-content">
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

ハイフンですね。

Bootstrap

ではBootstrapはどうでしょうか、以下はボックスのカラム表示のcssです。

<div class="container">
  <div class="row">
    <div class="col-md-2">
    サイドバーの表示
    </div>
    <div class="col-md-10">
    メインの表示
    </div>
  </div>
</div>

ここでもやはりハイフンを使っています。

しかし、JavaScriptの変数名にはハイフンは使えない

クラス名もファイル名もハイフンで統一でいいやと思いきやJavaScriptでは変数名にハイフンは使えません。

  var g-nav = $('.g-nav');

とかやると怒られてしまいます。
JavaScriptではハイフンはマイナスの記号になってしまうからです。

  var g_nav = $('.g-nav');
  var gNav = $('.g-nav');

のようにハイフンが使えないのでアンダースコアかキャメルにしなければいけません。
これでもいいといえばいいのですがこの微妙な違いがめんどくさくもあります。

全てキャメルにするという選択

全てを統一したいならアンダースコアかキャメルしかありません。
ここは好みだと思いますが個人的にはキャメルがいいかなと思っています。

私はwebアプリ開発ではphpを使っていますが仕事以外では変数、関数、クラス名にはキャメルを使用しています。
フレームワークのクラス名はアッパーキャメルですし、有名なjQueryのファイル名もキャメルの場合が多いようです。

ただキャメルは区切りが大文字なので可読性低いことがよく上げられますし、私も実際ハイフンやアンダースコアに比べると可読性が低いと感じます。

可読性をとるか、統一を取るか、またはGoogleのガイドラインを優先するかは難しいところではありますね!