📚
CSS Cascade Layers
@layerでスタイル優先順位を明示的に制御
CSSカスケードで同じ特異性のルールが衝突する際、ソース順序に依存するのは大規模プロジェクトで管理が困難です。@layerを使えばreset、base、components、utilitiesのようなレイヤーを宣言し優先順位を明示的に設定できます。
サードパーティCSSライブラリと自前のスタイル間の衝突もレイヤーできれいに解決できます。
適用方法
1
@layer reset, base, components, utilitiesでレイヤー順序を宣言する
2
各スタイルブロックを該当レイヤーに配置する
3
サードパーティCSSを別レイヤーに隔離する
4
!important使用をレイヤー順序制御で置き換える
メリット
- ✓ !importantの乱用なしで優先順位を制御できる
- ✓ サードパーティライブラリのスタイルを安全に隔離できる
デメリット
- ✗ レイヤーの概念をチーム全体が理解する必要がある
- ✗ 既存のコードベースに導入する際のリファクタリングコストが大きい
ユースケース
Tailwind CSSとカスタムスタイル間の優先順位衝突解決
マイクロフロントエンドでチーム別CSS隔離