Flocss Bem

• プレフィックス: u- (例: .u-mb-10)

ルール

• 単一ファイル禁止: style.scss に直接スタイルを書かないこと。必ずパーシャルファイル（例: _c-card.scss）を作成し、親ファイルで @use してください。
• 読み込み順序: style.scss 内での読み込み順は、Foundation -> Layout -> Object の順序を厳守してください。

2. 命名規則: BEM

クラス名は BEM (Block Element Modifier) を厳密に使用します。

• Block: .c-card
• Element: .c-card__title (アンダースコア 2 つ __)
• Modifier: .c-card--featured (ハイフン 2 つ --)

バリデーション例

• NG:
  • .c-card-title (Element 区切りがハイフン 1 つ)
  • .cCard (キャメルケース)
• OK:
  • .c-card__title
  • .p-top-news__item

3. アセット管理

画像ファイルは /assets/image に配置し、以下のプレフィックスを付与してください：

• icn_*: アイコン (SVG 推奨)
• logo_*: ロゴ
• bg_*: 背景画像
• img_*: 一般的なコンテンツ画像

4. 実装チェックリスト

1. 作成する UI のレイヤー（Component か Project か）を判断する。
2. 適切なディレクトリに _filename.scss を作成する。
3. ローダーファイル（index.scss等）で @use を追加する。
4. HTML コーディング前に、クラス名が BEM 規約に合致しているか確認する。