CSS CASCADING & INHERITANCE

Cascade Layers Visualizer

CSSの優先度を、詳細度の前から確認する。

BASELINE · WIDELY AVAILABLE

LIVE CASCADE INSPECTOR

同じ属性で異なる優先度

4 DECLARATIONS NORMAL

cascade.local / component

LIVE COMPUTED STYLE

LOW PRIORITYHIGH PRIORITY

COMPUTEDbackground-color#b4ff2b

THE SORTING ORDER

01Origin &
importance

出所と重要度

02Context

Tree context

03Style attr

要素のstyle属性

04Layer

@layerの宣言順

05Specificity

ID / Class / Type

06Scope

近いスコープ

07Source order

最後の宣言

READY TO USE

レイヤー名の最初の出現で、ドキュメント全体の順序が決まります。

PRACTICAL PATTERNS

THIRD PARTY

@import "vendor.css" layer(vendor);

DESIGN SYSTEM

@layer reset, tokens, components, utilities;

ROLLBACK

all: revert-layer;