名前付き vs 名前なしCSSコンテナ — コンテナに名前を付けるべきとき

名前付き vs 名前なしコンテナ

CSSコンテナクエリは、名前で特定のコンテナをターゲットするか、包含を持つ最も近い祖先にマッチすることができます。それぞれのアプローチをいつ使用するかを理解することが、保守しやすいCSSを書く鍵です。

名前なしコンテナ

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .child { /* styles */ }
}

名前がない場合、@containerは包含を持つ最も近い祖先にマッチします。シンプルで、独立したコンポーネントには適しています。

名前付きコンテナ

.container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .child { /* styles */ }
}

名前がある場合、クエリはその特定の名前を持つ祖先のみにマッチします。ネストされたシナリオでは不可欠です。

ショートハンドプロパティ

containerショートハンドでタイプと名前の両方を設定できます：

.sidebar {
  container: sidebar / inline-size;
}

ベストプラクティス

• シンプルで非ネストのコンポーネントには名前なしコンテナを使用。
• ネストされた包含がある場合や、明確さが重要な異なるレイアウトコンテキストでコンポーネントが共有される場合は名前付きコンテナを使用。