レイヤーの優先順位と!importantの相互作用

通常（!important ではない）の宣言では、カスケードの優先順位は次のとおりです。

1. レイヤー化されていないスタイル（最優先）
2. 最後に宣言されたレイヤー
3. 先に宣言されたレイヤー（最も低い優先順位）

!important 宣言では、優先順位が逆転します。

1. レイヤー化されていないスタイルの !important（!important 層では最も低い優先順位）
2. 最初に宣言されたレイヤーの !important（最優先）
3. 後から宣言されたレイヤーの !important（より低い優先順位）

この逆転は、元のカスケードにおけるユーザーと作成者の !important 宣言の仕組みを反映しています。ユーザーの !important は作成者の !important を上書きし、アクセシビリティ設定を保護します。同じ考え方がレイヤーにも適用されます。!important では、より先にある（より基盤となる）レイヤーが優先されます。

通常の優先順位と !important の優先順位を比較します。

レイヤー内での許容される用途は次のとおりです。

• リセット／ノーマライズレイヤー：重要なリセットをコンポーネントが上書きできないようにするための !important
• アクセシビリティユーティリティ：非表示ユーティリティの display: none !important
• モーション削減用リセット：animation: none !important

コンポーネントレイヤーでは、!important を決して使わないでください。レイヤーの目的が損なわれ、優先順位の問題がデバッグしにくくなります。ユーティリティが優先されるようにするには、レイヤーの順序を使ってください。

レイヤー化されていない !important は、!important 層で最も低い優先順位になります。つまり、直感に反して、リセットレイヤーの !important がレイヤー化されていない !important を上書きします。

作成者オリジン内では、レイヤーによって宣言の順序が決まります。ただし、ユーザーエージェントの !important とユーザーの !important は、作成者オリジンのすべての宣言（!important の有無を問わず）よりも上位にあります。カスケード全体の順序は次のとおりです。

1. ユーザーエージェントの !important
2. ユーザーの !important
3. 作成者の !important（レイヤー順では最初のレイヤーが優先）
4. 作成者の通常の宣言（レイヤー順では最後のレイヤーが優先）
5. ユーザーの通常の宣言
6. ユーザーエージェントの通常の宣言

プロジェクトでレイヤーの優先順位を確認するには、異なるレイヤーに意図的に競合するルールを記述し、DevTools でどのルールが優先されるかを確認します。Styles パネルには、優先されたルールがどのレイヤーに由来するかが表示されます。

@layer を導入すると、ほとんどのコンポーネント CSS では詳細度がそれほど重要ではなくなります。より単純で詳細度の低いセレクターを記述し、優先順位をレイヤーの順序に任せられるため、詳細度の競争を大幅に減らせます。

レイヤーが @layer reset, components, utilities と宣言されています。reset レイヤーと utilities レイヤーにそれぞれ !important 宣言があります。どちらが優先されますか。

通常の宣言では、後のレイヤーが優先されます。!important では、最初のレイヤーが優先されます。レイヤー化されていない !important は、!important 層で最も低い優先順位になります。!important はリセットレイヤーとアクセシビリティレイヤーでのみ使用してください。レイヤーを使うと、詳細度ではなくレイヤーの順序で優先順位を処理できるため、より単純なセレクターを記述できます。