ドキュメント
命名規則
v2 アーキテクチャにおけるファイル名・クラス名・CSS のルール
ファイル名とクラス名
| 対象 | ファイル名 | YAML での指定 | コード内の名前 |
|---|---|---|---|
| セクションレシピ | hero-basic.njk（kebab-case） | template: hero-basic | --- |
| エフェクト | bg-effect-snow.js（kebab-case） | BgEffectSnow（PascalCase） | class BgEffectSnow |
セクションレシピのファイル名は kebab-case、YAML でも同じ名前で指定します。
エフェクトのファイル名は kebab-case ですが、YAML ではクラス名（PascalCase）で指定します。これにより「ファイル参照」と「クラスのインスタンス化」の違いが明確になります。
エフェクトの命名規則
背景エフェクトには接頭辞 BgEffect を付けます。
BgEffect + 名前
例: BgEffectSnow, BgEffectAurora, BgEffectFirefly
ファイル名は対応する kebab-case にします。
BgEffectSnow → bg-effect-snow.js
BgEffectCherryBlossom → bg-effect-cherry-blossom.js
CSS クラス命名
テンプレート名をプレフィックスに使い、BEM 風で命名します。
/* hero-basic.css */
.hero-basic { } /* ルート */
.hero-basic__title { } /* 子要素 */
.hero-basic__lead { } /* 子要素 */
.hero-basic__inner { } /* 子要素 */
/* card-grid-basic.css */
.card-grid-basic { }
.card-grid-basic__card { }
.card-grid-basic__title { }
なぜテンプレート名をプレフィックスにするのか
複数のレシピが同じページに配置されてもクラス名が衝突しないためです。
NG: .title, .card, .item 汎用的すぎて衝突する
OK: .hero-basic__title テンプレート固有なので安全
ディレクトリ名
_sections/ セクションテンプレート（.njk + .css）
_effects/ エフェクト（.js）
_includes/ レイアウト
_data/ データファイル
いずれもアンダースコアで始まります。Eleventy はこれらをページとして処理しません。
.md ファイルのルール
.md ファイルは必ず index.md とし、ディレクトリで URL を構成します。
OK: about/index.md → /about/
NG: about.md → 使用不可