CSS @layer（カスケードレイヤー）とは — 詳細度の戦争を終わらせる新機能
CSS @layerはChromeとFirefox・Safariで2022年にサポートされたカスケードの新機能です。CSSのスタイル競合問題を「詳細度のハック」ではなくレイヤーの優先順位で明示的にコントロールできます。
@layerの基本的な使い方
`@layer reset, base, components, utilities;`と宣言することでレイヤーの優先順位を定義します。後に宣言されたレイヤーが勝ちます（utilitiesが最高優先度）。次に各レイヤーのスタイルを`@layer base { h1 { font-size: 2rem } }`のように書きます。これにより詳細度に関係なく、utilitiesのスタイルがbaseより常に優先されます。
詳細度とレイヤーの関係
通常のCSSでは`#id .class`（詳細度高）が`div.class`（詳細度低）に必ず勝ちます。@layerを使うと「utilitiesレイヤーのdivクラス」が「baseレイヤーのIDセレクター」に勝てます。レイヤー間の優先度がまず決まり、同じレイヤー内では詳細度で決まります。Tailwind CSSのような設計で詳細度地獄を脱却できます。
Tailwind CSS v4での活用
Tailwind CSS v4はネイティブで@layerを活用し、base・components・utilitiesの3層を@layerで管理しています。これにより`!important`ハックなしにユーティリティクラスがコンポーネントスタイルに常に勝てます。サードパーティCSSを`@layer vendor { @import "..." }`でラップすることで自分のスタイルが確実に優先されます。
ブラウザサポートと移行
@layerはChrome 99+・Firefox 97+・Safari 15.4+でサポートされています（グローバル普及率95%以上）。既存プロジェクトへの段階的導入は、まずCSSファイル全体を`@layer legacy { ... }`でラップするだけで始められます。legacyレイヤーを最初に宣言しておけば新しいスタイルが常に勝てる基盤が整います。