Neat Design Journal

こんにちは。先日ご紹介したHTMLエディタのBracketsを弄り倒してるんですが、ふとclass名の命名について気になったので色々調べてみたところ、コーディングガイドラインというものがあることを知りました。簡単に言うと1サイトに対して複数人でコーディング作業をする時の決まりごとのようなものなんですが、とても興味深かったので自分でも取り入れてみようと思います。

基本ルール

超基本的なところで言うと3つあります。

1. 文書構造を意識する
2. できるだけシンプルなコードにする
3. id名、class名は英語で記述する

文書構造を意識する

個人的に意外と見落としがちな点なんですが、例えばFlexboxのためだけに安易にdivを後付けで追加したり、後々のデザイン変更を見越して余計なタグをあらかじめ記述しておいたりということがあります。他にも『続きを読む』などのボタンをpタグ、著作権情報をaddressタグで記述するなど、ちゃんと表示されれば問題ないという考えではいけないなと感じました。

できるだけシンプルなコードにする

これは1.とも関連しますが、文書構造を意識して要所要所を適切なタグでマークアップすれば、自ずと無駄なidやclass名を付けることがなくなり結果的にシンプルなコードになると考えます。

id名、class名は英語で記述する

これも至極当たり前のことですが、ここで意図しているのは以前ドメイン名を考えた時と同じようにローマ字を使わないということです。理由はやっぱり何かダサいから（笑）記事エリアにkijiとか画像にgazouとか付けるとかしたらもう違和感しかありません。

自分ルール

基本ルールを踏まえてさらに自分用のルールをいくつか設けました。よく言われていることだと思うんですが改めて意識するために書き出してみます。

1. idは使わない
2. class名は意味の分かるものにする
3. 区切り文字にはアンダースコアを使う
4. 要素を直で装飾しない
5. 複数形を使う
6. メディアクエリは関連箇所に続けて記述する

idは使わない

HTMLタグにはid属性とclass属性を付与することができますが、自分ルールとしてid属性は使わないこととします。理由としては同一ページに一つしか使えないのであまり意味がないしclass属性との棲み分けも面倒。スタイルの優先度も変わるので分かりにくいからです。

class名は意味の分かるものにする

いくら英語で記述するというルールに基づいていてもパッと理解できない単語だと分かりにくいし管理もしづらいので、例えば難解な単語や省略形（button→btnなど）は使わないこととします。また、大文字も使わず全て小文字で記述することとします。

区切り文字にはアンダースコアを使う

class名には、2単語以上を区切る方法として主に以下の3つがあります。

1. ハイフン（ - ）を使う（例:post-title）
2. アンダースコア（ _ ） を使う（例:post_title）
3. 2単語目以下の頭文字だけ大文字にする（例:postTitle）

1.はチェインケース（chain-case）、2.はスネイクケース（snake_case）、3.はキャメルケース（camelCase）と呼ばれてるみたいなんですが、私はこのうち2.のスネイクケースを使うこととします。理由は簡単で、HTMLエディタなどで文字列をダブルクリックすると全部を一発で選択してくれるからです。class名はコピペを繰り返す場面が多いので地味に作業効率に関わってくることだと思います。この観点からするとキャメルケースも一発で選択できますが、パッと見て分かりやすいのは区切られている方だと思いますのでやはりスネイクケースが一番私には合ってると思います。

要素を直で装飾しない

スタイルを適用させる時は面倒臭がらずに必ずclass名を付与することとします。要素を直で装飾すると後々デザインを変更したい時などに考えて削除しないといけなくなるからです。これも作業効率からするとあまり良くないことかなと思います。あとこれに関連したことで言えばHTMLに依存しないCSSを心がけます。子孫要素や隣接した要素に対してスタイルを適用することはできますが、これも要素を直で装飾するのとあまり変わりがないように思いますし、個人的にはCSSセレクタについて熟知していないのでその場しのぎで使ってしまうと後々訳が分からなくなるからです。

複数形を使う

これはちょっと目から鱗だったんですが、後述するある記事で見つけたことです。
複数形を使うというのは例えば、

<div class="post">
	<div class="post_item">
		<p>投稿内容</p>
	</div>
	<div class="post_item">
		<p>投稿内容</p>
	</div>
	<div class="post_item">
		<p>投稿内容</p>
	</div>
</div>

こんな感じのHTMLがあったとします。よく見かける感じですね。これを、

<div class="posts">
	<div class="post">
		<p>投稿内容</p>
	</div>
	<div class="post">
		<p>投稿内容</p>
	</div>
	<div class="post">
		<p>投稿内容</p>
	</div>
</div>

こうします。違いが分かりますかね。投稿内容全体をまとめるdivのclass属性をpostsという複数形にして投稿内容のそれぞれをpostとしているんです。これは何で今まで気付かなかったのかなと思うくらい効果的でシンプルな方法です。この考え方で行けばあるブロックを囲う時に使うwrapperとかcontainerとか必要なくなりますね。

メディアクエリは関連箇所に続けて記述する

以前はメディアクエリだけまとめてCSSファイルの最後に記述していましたが、やっぱり後から修正する時に少し面倒でした。PC版を変更してそのままスマホ版も修正したいので、関連箇所に続けて記述する方が100倍楽になると思います。

最後に

とりあえずこんなところかなと思います。今までも多少意識はしていましたがこうして明文化すると余計な迷いがなくなってスッキリします。以下に参考にした記事を掲載しておきますので興味のある方はぜひどうぞ。ちなみにclass名の例がたくさん載っている記事も参考になりますので貼っときます。