@layer

カスケード(Cascade)とは、段々になってるものとか、段階的な意

カスケードレイヤーを宣言、優先順位を定義することができる

code:css

@layer a {

div {

margin: 0;

}

}

@layfer b {

div {

margin: 1rem;

}

}

後に書いたものが前に書いたものをオーバーライドするので、優先度はb > a

ただし、レイヤー化されていないスタイルの方が詳細度が高く、他のすべてのレイヤー内のスタイルより優先される

レイヤー化されていないスタイルは暗黙的に最後のレイヤーにひとまとめで追加される

これに加えて優先度定義のためにスタイル無しで名前付きのレイヤーを複数定義することで優先度をわかりやすくできる

code:css

@layer a, b;

優先順位はコード内で最初に現れることで確定するので、これをファイルの先頭に書いておくことで、スタイルの中身を書く時は順番を気にしなくて良くなる

code:css

@import "c.css" layer(a);

最初にこのように定義しておくと

code:css

@layer base,

layouts,

components

@importする順番は関係なくなる

code:css

@import 'button.css' layer(components);

@import 'reset.css' layer(base);