命名規則、どうしてる？
Webサイトをゼロベースで作成する時、使用するファイル名や、スタイルシートのID名、class名を付ける時、一定のパターン化をしているものの地味に迷うときもあるので、今一度パターンの再確認。
まず大前提として
日本語（漢字ひらがな）、全角英数記号、半角カタカナ、空白スペース（半角・全角）は使用しない
IDやclassはもちろん、ファイル名にも使えません。
CMS経由で、日本語ファイル名でアップしてしまうケースなどあったりしますが、ほぼ確実にURLエンコードの餌食になり、アクセス解析などに支障をきたすので、これらの使用は避けるのが賢明です。
記号はハイフン（-）、アンダースコア（_）のみ可能
ファイル名で上記以外の記号を入力しようとすると、アラートが出て使えません。
CSS、JSでも記号類はプログラム上で多用されるため、上記記号以外は名前の一部として使用するべきではありません。
以上を踏まえまして。
命名パターン
ファイル名編
ファイル名の命名時に使用するは、主に以下の属性
ページ名・使用箇所
種類
連番
状態
これらを「-」or「_」で組み合わせて、ファイル名を形成します。
よく使われるであろう名前を、表でまとめるとこんな感じ。
$$
\begin{array}{|c|lcr|}
\hline
ページ名・使用箇所 & index、top、header、footer、nav… \\
\hline
種類 & img、logo、icon、photo、graph、data… \\
\hline
連番 & 01、02、03… \\
\hline
状態 & on、off、pc、sp… \\
\hline
\end{array}
$$
作例
ヘッダーのロゴ画像・・・header_logo.png
トップページのキービジュアルスライドの2枚目・・・top_kv02.jpg
矢印アイコン左向き・・・icon_left.png
スマホ用フッターバナー1枚目・・・footer_bnr01_sp.jpg
等など、属性の中から2つ3つ組み合わせて作ります。
組み合わせ順も、ほとんどが大規模属性→小規模属性といった順にしています。
またファイル名が長くなるのも避けたいので、単語が長くなりそうなものは略して当てはめることもよくやります。
ID、class名編
こちらも属性をチョイスして命名するのは一緒ですが、主な属性は
場所
状況・状態
の、大まかに分けて2種類に絞られます。
また、使用はファイル名と違い単体で使うときが多く、単語を組み合わせる時も「-」や「_」に加え、キャメルケース（2つ目以降の単語の頭文字を大文字）を使用することもあります。
あと、ファイル名と違って、数字から始まるID、class名は設定できません。
以上を踏まえて、表にまとめると以下の感じ。
$$
\begin{array}{|c|lcr|}
\hline
場所 & header、footer、contents、nav、title、list、button… \\
\hline
状況・状態 & column、inner、left、right、center、next、prev、margin、padding… \\
\hline
\end{array}
$$
使用例
ヘッダー・・・header
ナビゲーションエリア・・・nav（長いので大体略式）
コンテンツエリア、エリアの入れ子・・・contents、contents_inner
大タイトル、中タイトル、小タイトル・・・title、title_m、title_s
通常リスト、黒丸リスト・・・list_nml、list_disc
テキストリンク、PDFリンク・・・link_txt、link_pdf
メニュー開閉ボタン、送信ボタン・・・btn_menu、btn_submit
等、明確に目的が判明しているものについては、場所属性など入れて用途を定めた命名をしていきます。
が、中には用途が不定形、現状不明確といったものが出てくるときがありますが、その時は、汎用的な名前を付けて、用途が定まることがあれば命名調整といったこともあります。
使用例
入れ子・・・○○_box、○○_wrap
複数カラム・・・clm_2、clm_3
加えて、個人的に以下の点に注意してcssを組み立てています。
タグ単体を直接セレクタにしない
・・・予期せぬ仕様の適用を避けるため。IDの設定はscript類の兼ね合いを考慮し、極力控える
・・・バッティング回避。設定するときは被りがないか調べてから。
さいごに
色々書き連ねましたが、自身の中でルール化をするにしても、回数と慣れがものをいう部分かと思います。
取り留めのないポストですが、頭の片隅に組み立てのコツの一端として残していただければ。
この記事が気に入ったらサポートをしてみませんか？