CSSの@layerってなぁに

10 Oct, 2025

最近追加された、CSSの優先順位を開発者が決定できる仕組み！

こういうふうにレイヤーを定義すると、

@layer reset, base, components, utilities;

@layer reset {
  /* リセットCSS */
  * { margin: 0; padding: 0; }
}

@layer base {
  body { font-family: "Noto Sans"; }
}

@layer components {
  button { background: pink; }
}

@layer utilities {
  .text-center { text-align: center; }
}

レイヤーが後のスタイルから優先順位が高くなる（後のもので上書きしていくイメージ）

簡単ルール:

• 上に書いたレイヤーが下より弱い（早く適用）
• 同じレイヤー内では後に書いた方が強い
• レイヤーを宣言しないCSS（普通のやつ）は、すべてのレイヤーより強い（最後の砦🔥）

CSS苦手な理由のひとつが、

スタイル書いても、なぜか読み込まれない

なんで読み込まれないのかがわからない（詳細度が足りてないのか、指定方法が間違ってるのか...???）

だったんだけど、

これ使ったらけっこうわかりやすくなると思ったよぃ

Tailwindも内部で使ってるみたぃ

#tech