@layerの宣言と順序

CSSのカスケードレイヤー（@layer）は、詳細度とは独立して、カスケードにおけるCSSルールの優先順位を明示的に制御する仕組みです。優先度の低いレイヤーは、詳細度の高いセレクターを持っていても負けます。

レイヤーがない場合、すべてのCSSルールが詳細度とソース順で競合します。その結果、リセット、コンポーネント、ユーティリティのスタイルが優先順位を奪い合い、詳細度の競争につながります。レイヤーを使うと、各グループに固定された予測可能な優先順位を設定できます。

レイヤーは1つの文であらかじめ宣言します。宣言の順序が優先順位を決め、後のレイヤーが前のレイヤーに優先します。

@layerの宣言は、スタイルシートの先頭（またはメインのインポートファイル）に置きます。宣言の後であれば、どの順序でもレイヤーにスタイルを追加できます。優先順位を決めるのはスタイルを追加した位置ではなく、宣言の順序です。

レイヤーの優先順位は宣言時に決まるため、レイヤーが宣言される前であっても、前方参照によってどこからでもスタイルを追加できます。重要なのは宣言された順序です。

後のレイヤーにある宣言は、詳細度にかかわらず、前のレイヤーにある宣言に必ず優先します。

どのレイヤーの外側に置かれたスタイルはレイヤー外と呼ばれます。最後に宣言したレイヤーよりも高い、最も高い優先度を持ちます。常に優先させたい緊急の上書きに使用します。

作成者スタイルにおける完全な優先順位（高い順）は次のとおりです。

1. レイヤー外のスタイル（どの@layerにも含まれないもの）
2. 最後に宣言したレイヤー（例: utilities）
3. 最後から2番目のレイヤー（例: components）
4. それより前のレイヤー（base、reset）

レイヤー内の!importantには注意が必要です。この宣言ではレイヤーの順序が逆転します。最も早いレイヤーにある!importantが、後のレイヤーにある!importantより優先されます。これは、ユーザースタイルと作成者スタイルにおける従来のカスケードの動作に一致します。

レイヤーはドット記法を使ってネストできます。

現実的なプロジェクトのレイヤー設定例です。

レイヤーが@layer base, components, utilitiesとして宣言されています。競合した場合、どのレイヤーのスタイルが優先されますか。

@layerは、順序を明示的に指定したカスケードレイヤーを定義します。レイヤー名は優先順位の低いものから宣言します。後のレイヤーは、詳細度にかかわらず、常に前のレイヤーに優先します。レイヤー外のスタイルが最も高い優先度を持ちます。!importantを使うと、その宣言ではレイヤーの優先順位が逆転します。