カスケード：OriginとOrder

カスケードは、同じ要素の同じプロパティを対象とする複数のルールがある場合に、どのスタイル宣言を適用するかを決定するCSSのアルゴリズムです。オリジン、重要度、詳細度、ソース順を考慮します。

CSS宣言には、優先順位の順に次の3つのオリジンがあります。

1. ユーザーエージェントスタイルシート — ブラウザーのデフォルト
2. ユーザースタイルシート — ユーザーが設定したカスタムスタイル（アクセシビリティ）
3. 作成者スタイルシート — 作成者のCSSファイル

通常の（重要度の指定がない）宣言では、作成者のスタイルがユーザーのスタイルに優先し、ユーザーのスタイルがユーザーエージェントのスタイルに優先します。これが、作成したCSSがブラウザーのデフォルトに勝つ理由です。

!importantを追加すると、その宣言のオリジンの順序が逆転します。

1. ユーザーエージェントの!important
2. ユーザーの!important — 最も高い優先順位（アクセシビリティ）
3. 作成者の!important

これにより、ユーザーのアクセシビリティ用の上書き（強制カラーモードなど）が、作成者のCSSによって無効化されることはありません。

同じオリジンの2つの宣言が競合する場合は、詳細度によって勝敗が決まります。詳細度の高い方が優先されます。これは、CSSのデバッグで開発者がまず考える要素です。

2つのルールの詳細度が同じ場合、スタイルシートの後ろに記述されたルールが優先されます。これが「ソース順」のルールです。そのため、@import文と@keyframe宣言の順序が重要になります。

CSSカスケードレイヤー（@layer）は、オリジンと詳細度の間に新しいカスケードの段階を導入します。レイヤーの順序によって優先順位が決まり、後のレイヤーにある宣言は、詳細度に関係なく前のレイヤーにある宣言より優先されます。

完全な優先順位（高い順）は次のとおりです。

1. オリジンと重要度（ユーザーの!important、作成者の!important）
2. アニメーション値
3. CSSレイヤー（後のレイヤーが優先）
4. 詳細度
5. ソース順
6. トランジション値

継承はカスケードとは異なります。継承された値は、親要素の計算済みスタイルから取得されます。詳細度の低いルールから直接適用された値であっても、継承された値より優先されます。

より詳細度の高い（バリアント）スタイルは、スタイルシート内でベーススタイルの後に配置してください。そのため、コンポーネントのファイルはリセットファイルやベースファイルの後にインポートする必要があります。

DevToolsのStylesパネルでは、ルールが優先順位の高い順に表示されます。取り消し線が付いたルールは、カスケードで負けたルールです。ルールにカーソルを合わせると、デバッグに役立つソースファイルと行番号を確認できます。

同じプロパティを対象とする2つのルールの詳細度が同じです。どちらが優先されますか。

カスケードは、オリジン（作成者 > ユーザー > ブラウザー）、重要度（!importantで順序が逆転）、@layerの順序、詳細度、ソース順の順にスタイルの競合を解決します。カスケードを理解すれば、どの競合でも正確にどのルールが優先されるかを予測でき、推測に頼る必要がなくなります。