Cascade Layers (@layer)
@layer はCSSカスケードに新しいレイヤー概念を追加する。レイヤーの宣言順で優先度が決まるため、詳細度の競合を回避できる。リセットCSS・ライブラリ・コンポーネント・ユーティリティといった階層構造を明示的に定義可能。
概要
@layer はCSSカスケードに新しいレイヤー概念を追加する。レイヤーの宣言順で優先度が決まるため、詳細度の競合を回避できる。リセットCSS・ライブラリ・コンポーネント・ユーティリティといった階層構造を明示的に定義可能。
対応ブラウザ
デスクトップ
Chrome 99+
Edge 99+
Safari 15.4+
Firefox 97+
モバイル
Chrome Android 99+
Safari iOS 15.4+
Firefox Android 97+
基本構文
CSS
/* レイヤーの優先順位を宣言 */
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer base {
body { font-family: system-ui, sans-serif; line-height: 1.6; }
a { color: var(--color-primary); }
}
@layer components {
.btn { padding: 8px 16px; border-radius: 6px; }
.card { padding: 1rem; border: 1px solid #e5e7eb; }
}
@layer utilities {
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}実務での使いどころ
-
CSSアーキテクチャの整理
リセット→ベース→コンポーネント→ユーティリティの優先順位を明示的に管理。
-
サードパーティCSSとの共存
外部ライブラリのスタイルを専用レイヤーに配置し、プロジェクトのスタイルとの競合を防ぐ。
注意点
- レイヤーに属さないスタイルは全てのレイヤーより優先される点に注意。
- !important のレイヤー内優先度は通常とは逆順になる。
アクセシビリティ
- レイヤーの優先順位ミスでフォーカスインジケーターが消えないよう、ユーティリティレイヤーに a11y 関連スタイルを配置する。