# @layer

> スタイルの優先順位を詳細度ではなく「レイヤーの宣言順」で管理するカスケードレイヤーです。reset・base・components・utilitiesのような層に分ければ、詳細度バトルや!importantの乱用を根本から解消できます。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/cascade-layers/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/@layer

## 構文

```css
@layer <layer-name>, ...; / @layer <layer-name> { <rules> }
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 99+ / Firefox 97+ / Safari 15.4+ / Edge 99+

## コード例

### 例1: レイヤー順で優先度を管理（詳細度に依存しない）

```css
/* 先に優先順位を宣言（後ろほど強い） */
@layer reset, base, components, utilities;

@layer base {
  a { color: #2563eb; }
}

@layer components {
  .button { color: white; }
}
```

### 例2: ライブラリのCSSを弱いレイヤーに閉じ込める

```css
/* 外部CSSをレイヤーに隔離して上書きしやすくする */
@import url('vendor.css') layer(vendor);

@layer vendor, overrides;

@layer overrides {
  .vendor-widget { margin: 0; }
}
```

## TIPS

「レイヤーに属さないスタイルは全レイヤーより強い」がルールです。これを利用して、通常のスタイルを最後の砦にできます。ファイル冒頭で@layer a, b, c;と順序だけ先に宣言しておくのが定石です。

## よくある間違い

!importantが付くとレイヤーの優先順位が逆転します（先に宣言したレイヤーの!importantが最強）。この仕様は直感に反するため注意。また@layer内のスタイルはレイヤー外の同セレクタに必ず負けるので「効かない」と混乱しがちです。

## AIがよく間違えるポイント

AIは詳細度の競合に対して:where()での詳細度ゼロ化や!important、セレクタの詳細度引き上げを提案しがちで、@layerによる構造的な解決を出さないことが多いです。また「!importantはレイヤー順が逆転する」「レイヤー外がレイヤー内より強い」という2つの反直感ルールはAIも頻繁に間違えます。

## AIへの依頼文例

- このCSSをreset/base/components/utilitiesの@layer構成に再編して、!importantを全廃して
- サードパーティのCSSがサイトのスタイルを壊すので、@importのlayer()で隔離する設計にして
- @layerと!importantの優先順位の関係を、このコードが効かない原因として調査して

## 関連プロパティ

- [css-nesting](https://www.css-dictionary.com/property/css-nesting.md)
- [css-custom-properties](https://www.css-dictionary.com/property/css-custom-properties.md)
- [media-queries](https://www.css-dictionary.com/property/media-queries.md)