CSS cascade / origin / layer / specificity
CSS競合のorigin・layer・specificity・順序を分ける
specificityだけで勝敗を決めず、origin、layer、source order、importantを順番に確認します。外部CSSは取得せず、合成ruleだけを使います。
5つの確認軸
CSS cascadeはoriginとimportance、layer、specificity、source orderの順に条件を分けて見ると、無用なimportantの追加を避けやすくなります。
origin → layer → specificity → source order
!important は通常ruleと別の境界| 軸 | レビュー |
|---|---|
| origin | author・user・UAを混同しない。 |
| layer | layerの順序とlayer外ruleを分ける。 |
| specificity | 同じ条件内の比較として使う。 |
| source order | 他条件が同じ時の後勝ちを確認する。 |
| important | 追加前にoriginとlayerを再確認する。 |
安全な修正の順番
- 勝ったruleのoriginとimportanceを記録する。
- layerとunlayeredの関係を確認する。
- specificityを必要最小限で比較する。
- source orderを最後に確認し、修正票を承認する。
このページは外部stylesheetを読み込みません。実CSSの変更はレビュー後に既存の承認手順で行います。
6つの合成case
| case | 結果 |
|---|---|
origin-author | Author origin |
layer-order | Layer order |
specificity | Specificity |
source-order | Source order |
important-override | Important boundary |
unsupported-external-css | Reject |