Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

いま僕がやってるhtmlコーディング、画像名決定時の命名規則

Dev

はじめに

ちょっと今htmlコーディング時や画像につけている名前のルールを書いときます。

コーディングで名前を考える

見た目を反映したものやそれが何を表しているかといった不可解な名前ではなく、要素の目的や役割を反映した名前をつける

top, rightなど、レイアウトによる名前は避ける。これは、機能追加やリニューアルといった時にとても弱い命名付けであると思う。パーツが移動すれば変更の度に命名も変更しなければならない。

作成時のレイアウトから名前を考えてはならないということ。

意味の分かる範囲でできるだけ短いIDとクラス名を使用する

だがしかし、省略語は避ける。特に一般的な単語でケースで省略されてしまうと新しくプロジェクトに入ってきた人などは意味がわからず、考えて解決するしかないので時間が掛かるし最終的に正しいかも不明。

一般的な単語よりも意味の限定された単語を使う

限定された単語なら難しくても辞書を調べればわかる。一般的な単語だと「あーはいはい」と解釈されて、それが間違っている可能性に気づかない。

アウトラインを意味するものには以下を

それ自身が要素としての意味を持たないときは box, inline-box, row, など、要素を形取る単語を頭に付ける。

画像名決定

画像の種類を第一に置く。意図としてはimageファイル閲覧時に整頓されて目的のものが早く見つかることや、ソースだけ見た時にもわかりやすいことがあげられる。

btnやicoなどは既に一般的に使用されているものなので省略を使う。余分に一語置いているので続く単語と合わせて名前が長くなり過ぎないことも省略を使用しない理由。

ex) logo_service.jpg , ttl_main.gif

画像種類 名前
ロゴ logo
ボタン btn
アイコン ico
イラスト illst
写真 photo
バナー bnr
タイトル ttl

でも思うこと

コーディングのとこで「見た目を反映...」と書いてるので矛盾が発生しているようにも思う。

上記のような区別は難しいが、ファイルタイプで区別がつかないものでもないと思う。例えば、photo, illst ⇒ jpgとか、ico, btn ⇒ gif(png, jpg)とか。個人でやるときには頭に画像の種類を示す名前をしなくてもいいかも。

おわりに

ふー