css @layer ちゃんと理解したい

layer 内の css 記述

/* block at-rules */
@layer {rules}
@layer layer-name {rules}

layer 名前なしでもいけるのか？

Unlayered >>> Layer

Styles that are not defined in a layer always override styles declared in named and anonymous layers.

layer 関係ない style の方が layer の style より強い

layer 跨いだら specificity 関係ない

A rule in utilities would be applied even if it has lower specificity than the rule in theme. This is because once the layer order has been established, specificity and order of appearance are ignored. This enables the creation of simpler CSS selectors because you do not have to ensure that a selector will have high enough specificity to override competing rules; all you need to ensure is that it appears in a later layer.

@layer theme, layout, utilities;

この場合、どれだけ theme 内の css の specificity が高かろうが、utilities layer の style が適用される。

anonymous layer

名前なしの layer も作れる

@layer {
  p {
    margin-block: 1rem;
  }
}

This creates an anonymous cascade layer. This layer functions in the same way as named layers; however, rules cannot be assigned to it later. The order of precedence for anonymous layers is the order in which layers are declared, named or not, and lower than the styles declared outside of a layer.

layer に名前がないので、anonymous layer は常に css block と一緒に作成することになる。
優先度は、anonymous layer の定義された順序に準拠する。

anonymous layer も layer なので unlayered な style により弱いため上書きされる。

@import と一緒に使う

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

Another way to create a cascade layer is by using @import. In this case, the rules would be in the imported stylesheet. Remember that the @import at-rule must precede all other types of rules, except @charset and @layer rules.

@import で layer 内の css を指定しながら layer を作成できる。

layer は nest できる

@layer framework {
  @layer layout {
  }
}

nest した layer に css を追加する場合は . で sub layer を指定可能↓

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

layer を nest したいケースってあるんだろうか...