構造ルール

コンポーネントのクラスセレクタ（Block / Element）の関係は次のルールに従います。

許可される構造

• Block > Block
• Block > Element

禁止される構造

• Element > Block
• Element > Element
• 親 Block の SCSS 内で、> .child-block > .element のように子 Block 配下の Element まで直接指定する構造

例外

レイアウト目的ではない装飾・意味付けに限り、Element > Element を許可（例: .content > .paragraph > .emphasis）。

ネストの深さ

Block のネスト

• Block > Block までは許可、Block > Block > Block の 3 段以上は原則避ける
• 孫以降に「意味のある塊」が現れた場合は、親 Block 直下の別 Block に格上げを検討
• 親 Block の SCSS には自分自身と直下の > .child だけを書く

Element のネスト

• Element 連鎖は装飾・意味付けの例外に限り許可
• 深さの目安は最大 4 段（Block > Element > Element > Element > Element）

階層構造の例

正しい構造（親 Block）

.search-form {
  // Block (2 語)
  > .field {
    // Element (1 語)
  }
  > .actions-container {
    // 子 Block (2 語)
    // 配置だけを指定
  }
}

間違った構造（親 Block）

.search-form {
  > .actions-container {
    > .button {
      // ❌ 親が子 Block 配下の Element まで指定している
    }
  }
}

正しい構造（子 Block）

.actions-container {
  // 1 つのコンポーネントとして扱う
  > .button {
    // Element (1 語)
  }
}

コンポーネントは Block > (Block | Element) の繰り返しで表現されます。