code-bem-check.prompt.md

by interlife

HTML

---
description: "SCSS BEM記法チェック・修正"
model: 任意のAIモデルを指定
agent: agent
---

## タスク
開いているファイル/変更されたファイルのSCSSをチェックし、BEM記法で書けるところを通常のSCSSで指定している箇所を検出して、BEMに則った記法に修正してください

## 背景・文脈
BEM（Block Element Modifier）記法を統一して使用することで、コードの可読性・保守性を向上させたい

## BEM記法の基本ルール

### 命名規則
- **Block**: 独立したコンポーネント（例: `.card`, `.header`, `.menu`）
- **Element**: Blockの構成要素（例: `.card__title`, `.card__image`）
- **Modifier**: BlockまたはElementのバリエーション（例: `.card--large`, `.card__title--bold`）

### SCSSでの正しいBEM記法
```scss
// ✅ 正しいBEM記法
.card {
  padding: 16px;
  
  &__title {
    font-size: 18px;
  }
  
  &__image {
    width: 100%;
  }
  
  &--large {
    padding: 24px;
  }
  
  &__title--bold {
    font-weight: bold;
  }
}
```

## チェック観点

### 1. 子孫セレクタの不適切な使用

#### ネストによる子孫セレクタ
- [ ] `.block .element` の形式になっている
- [ ] `&` を使わずにネストしている

```scss
// ❌ 問題あり: 子孫セレクタ
.card {
  .title {
    font-size: 18px;
  }
  .image {
    width: 100%;
  }
}

// ✅ 修正後: BEM記法
.card {
  &__title {
    font-size: 18px;
  }
  &__image {
    width: 100%;
  }
}
```

### 2. 要素セレクタとの組み合わせ

#### タグ名との組み合わせ
- [ ] `.block h2`, `.block p` などの形式
- [ ] クラス名ではなく要素名で指定

```scss
// ❌ 問題あり: 要素セレクタ
.card {
  h2 {
    font-size: 18px;
  }
  p {
    color: #666;
  }
}

// ✅ 修正後: BEM記法
.card {
  &__heading {
    font-size: 18px;
  }
  &__text {
    color: #666;
  }
}
```

### 3. 深いネストの解消

#### 3階層以上のネスト
- [ ] `.block .element .sub-element` の形式
- [ ] BEMでは原則2階層まで

```scss
// ❌ 問題あり: 深いネスト
.card {
  .header {
    .title {
      font-size: 18px;
    }
  }
}

// ✅ 修正後: フラットなBEM
.card {
  &__header {
    // styles
  }
  &__title {
    font-size: 18px;
  }
}
```

### 4. Modifierの不適切な記述

#### 状態を表すクラスの記述
- [ ] `.block.active` のような結合セレクタ
- [ ] 別クラスでの状態管理

```scss
// ❌ 問題あり: 結合セレクタ
.card {
  &.active {
    border-color: blue;
  }
}

// ✅ 修正後: BEM Modifier
.card {
  &--active {
    border-color: blue;
 ...