スタイルの優先順位を詳細度ではなく「レイヤーの宣言順」で管理するカスケードレイヤーです。reset・base・components・utilitiesのような層に分ければ、詳細度バトルや!importantの乱用を根本から解消できます。
@layer <layer-name>, ...; / @layer <layer-name> { <rules> }/* 先に優先順位を宣言（後ろほど強い） */
@layer reset, base, components, utilities;
@layer base {
a { color: #2563eb; }
}
@layer components {
.button { color: white; }
}レイヤー順で優先度を管理（詳細度に依存しない）
/* 外部CSSをレイヤーに隔離して上書きしやすくする */
@import url('vendor.css') layer(vendor);
@layer vendor, overrides;
@layer overrides {
.vendor-widget { margin: 0; }
}ライブラリのCSSを弱いレイヤーに閉じ込める
「レイヤーに属さないスタイルは全レイヤーより強い」がルールです。これを利用して、通常のスタイルを最後の砦にできます。ファイル冒頭で@layer a, b, c;と順序だけ先に宣言しておくのが定石です。
!importantが付くとレイヤーの優先順位が逆転します（先に宣言したレイヤーの!importantが最強）。この仕様は直感に反するため注意。また@layer内のスタイルはレイヤー外の同セレクタに必ず負けるので「効かない」と混乱しがちです。
AIは詳細度の競合に対して:where()での詳細度ゼロ化や!important、セレクタの詳細度引き上げを提案しがちで、@layerによる構造的な解決を出さないことが多いです。また「!importantはレイヤー順が逆転する」「レイヤー外がレイヤー内より強い」という2つの反直感ルールはAIも頻繁に間違えます。
このCSSをreset/base/components/utilitiesの@layer構成に再編して、!importantを全廃して
サードパーティのCSSがサイトのスタイルを壊すので、@importのlayer()で隔離する設計にして
@layerと!importantの優先順位の関係を、このコードが効かない原因として調査して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。