詳細度戦争の歴史と!important乱用の構造的課題

CSS（Cascading Style Sheets）は、ウェブドキュメントの視覚的スタイリングを担う不可欠な標準技術です。しかし、近年の大規模なフロントエンド開発や複数のUIライブラリを組み合わせる環境において、エンジニアは常に「詳細度戦争（Specificity Wars）」と呼ばれる根深い問題に悩まされてきました。CSSの伝統的なカスケード機構は、スタイルの出所（ユーザーエージェント、制作者、ユーザー）、詳細度スコア（インラインスタイル、IDセレクタ、クラス/属性セレクタ、要素セレクタの個数）、そして記述順序に基づいて優先順位を計算します。

この仕組みの下では、外部のUIコンポーネントライブラリを導入した際、ライブラリ側で定義された強固なセレクタ（例: #sidebar nav.menu ul li a.active）を上書きするために、開発者側でもさらに長大なセレクタを記述するか、安易に「!important」を付与して強制的に適用させる手法が常態化していました。その結果、コードベース全体に!importantが蔓延し、スタイルの変更や削除が予期せぬ画面崩れを引き起こすスパゲッティCSS化を招いていました。この詳細度の呪縛を根本から断ち切るため、W3Cは「CSS Cascading and Inheritance Level 5」において、新機能「@layer（カスケードレイヤー）」を正式策定しました。

@layerの動作原理と詳細度を無視した階層制御

カスケードレイヤー（@layer）の最大の革新は、セレクタの詳細度スコア計算とカスケードの優先順位を「完全に分離」した点にあります。開発者が明示的にレイヤーの順序を定義すると、どれほど詳細度スコアが高いセレクタ（IDセレクタ等）であっても、下位レイヤーに属している限り、上位レイヤーに記述された低詳細度の単純なセレクタ（単一要素セレクタ等）によって無条件に上書きされます。

レイヤーの優先順位は、スタイルシート内で@layerが最初に宣言された順序によって決定されます。一般的な設計では、スタイルシートの先頭で以下のようにレイヤーの基本構造を宣言します： @layer reset, base, components, utilities; この定義において、最も右側にあるutilitiesレイヤーが最高の優先順位を持ち、最も左側にあるresetレイヤーが最も低い優先順位となります。たとえばcomponentsレイヤー内に「#main .card .title { color: black; }」という詳細度の高いルールが存在しても、utilitiesレイヤーに「.text-blue { color: blue; }」という単一クラスのルールがあれば、詳細度計算を飛び越えてutilities側の青色が確実に描画されます。なお、互換性を維持するため、どのレイヤーにも属さない「レイヤー外スタイル（Unlayered）」は、すべてのレイヤー内スタイルよりも常に優先されるルールとなっています。

この比較が当てはまるのは、同じoriginとimportanceにある作成者スタイルシートの通常宣言について、レイヤー順を比べる場合だけです。インラインのstyle属性は同じ重要度のスタイル規則より優先され、animation宣言とtransition中の値も別のcascade段階にあるため、このレイヤー比較には含まれません。

実践的なレイヤーアーキテクチャと外部ライブラリ統合

モダンなエンタープライズ開発において、@layerはデザインシステムの秩序を維持するための基盤アーキテクチャとして活用されます。標準的な構成では、ブラウザの差異を吸収する「reset」、基本タイポグラフィを定める「base」、UIコンポーネントを構成する「components」、単機能クラスを集めた「utilities」へと関心事を階層的に分離します。

vendor CSSを低い優先順位に置くには、レイヤー名が最初に現れる順を先に固定します。たとえば次のように書けます。

@layer vendor, reset, base, theme, components, utilities;
@import url('vendor.css') layer(vendor);

@layer components {
  .button { color: blue; }
}

通常宣言では後のレイヤーが優先されるため、この順序ならcomponentsがvendorに勝ちます。@importはスタイル規則より前に置く必要があります。例外は@charsetと空の@layer宣言などです。先にimportでvendorが登場した後では、後から書く順序宣言で前方へ移せません。W3Cのレイヤー順序規則と[@importの配置規則](https://www.w3.org/TR/css-cascade-5/#importing-style-sheets)を参照してください。legacy CSSも初出前に順序宣言へ含めると意図を明確にできます。

!importantの逆転現象とブラウザ対応状況の留意点

カスケードレイヤーを実務で運用する上で、すべてのエンジニアが必ず理解しておくべき重要な挙動が「!importantによる優先順位の逆転（Inversion）」です。通常のスタイルルールでは上位レイヤーが下位レイヤーを上書きしますが、プロパティに!importantを付与した瞬間にレイヤー間の優先順位が完全に「逆転」します。すなわち、resetレイヤー内の!importantルールが、utilitiesレイヤー内の!importantルールよりも強力になります。これは、アクセシビリティ担保のための最小限の視覚要件やリセット制約が、上位レイヤーの勝手な記述によって破壊されないようにするためのW3Cの意図的な仕様設計です。

また、MDNでは@layerはBaseline Widely availableとされていますが、過去の全ブラウザーや組み込みWebViewまで含む意味ではありません。MDNの互換性表を使い、対象バージョンと利用状況を確認し、必要な場合だけフォールバックを用意してください。

資料：W3C §6.4.3 レイヤー順序、[W3C §2 @import](https://www.w3.org/TR/css-cascade-5/#importing-style-sheets)、[MDN @layer互換性](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40layer)。