id・class・ファイル・ディレクトリ名の命名規則

1. 基本ルール
2. BEM 命名規則（class名）
3. 共通 Block 名の統一

基本ルール

・id名・class名・ファイル名・ディレクトリ名は正しい英単語を使用し日本語・ローマ字読みはNG
・区切り文字は ハイフン（-） で統一（アンダースコアはBEM専用）
・数字から始めない。アルファベットから開始
・ファイル名は全て小文字で統一
・全角半角ともにスペースは使わない
・連番は 00〜の2ケタ

BEM 命名規則（class名）

Block__Element–Modifier の構造で記述する。

/* Block */
.card { }

/* Block__Element */
.card__title { }
.card__img { }
.card__btn { }

/* Block__Element--Modifier */
.card--featured { }
.card__btn--disabled { }

・Block は独立したコンポーネント単位
・Element は Block 内の構成要素（__ で連結）
・Modifier は状態・バリエーション（-- で連結）
・Element の入れ子は1段まで（.card__list__item はNG → .card__item）

共通 Block 名の統一

どのサイトでも共通で使用する Block 名は下記で統一。

ページ全体・・・wrapper
コンテンツエリア・・・contents
入れ子・・・inner

ヘッダー・・・header
ロゴ・・・logo
キャッチフレーズ・・・catch

ナビゲーション・・・nav
グローバルナビ・・・g-nav
パンくず・・・breadcrumb
現在位置・・・current

メインコンテンツ・・・main
メインビジュアル・・・main-visual
リード文章・・・lead
記事・・・article
セクション・・・section
テキスト・・・text
アイコン・・・icon
背景（アイコン以外）・・・bg
矢印・・・arrow
線・・・line
サイドバー・・・sidebar
画像・図・写真・・・img
サムネイル・・・thumb
バナー・・・banner
ボタン・・・btn