CSSの@layerとは？優先順位が一瞬で分かるカスケードレイヤー完全解説【初心者向け】

そもそもCSSの「優先順位」はなぜややこしいのか

CSSは Cascading Style Sheets の略で、「Cascading（カスケード）」とは 滝のように重なって適用される という意味です。

これまでCSSでは、主に次のルールでどのスタイルが勝つか が決まっていました。

• ID（#title）はクラス（.title）より強い
• より詳しく書いたセレクタの方が強い
• 同じ強さなら、後に書いた方が勝つ

この仕組みのせいで、こんなことが起きます。

「ちょっと色を変えたいだけなのに、もっと強いセレクタを書かないと反応しない……」

結果として、

• セレクタがどんどん長くなる
• !important が増える
• どこでスタイルが決まっているか分からない

という CSS強さバトル地獄 に陥ってしまうのです。

@layer は「優先順位をグループで決める」仕組み

そこで登場したのが @layer です。

一言で説明すると、CSSを「グループ（レイヤー）」に分けて、そのグループごとに優先順位を決める仕組みです。

たとえ話で考えてみましょう

あなたがお店のルールを作るとします。

• 【新人さんのルール】フォルダ
• 【店長さんのルール】フォルダ

新人さんが「今日は18時閉店です！」と言っても、

店長さんのフォルダに「今日は20時閉店！」と書いてあれば、店長の勝ちですよね。

@layer は、CSSでもこれと同じことを可能にします。

@layer の基本的な使い方（2ステップ）

ステップ①：レイヤーの順番を決める

まず、CSSの一番上でどのレイヤーが強いか を宣言します。

右に書くほど優先順位が高い（偉い）

/* 左 → 右 に行くほど強い */
@layer base, layout, demo;

この場合の力関係はこうです。

base ＜ layout ＜ demo（最強）

ステップ②：レイヤーの中にスタイルを書く

あとは、それぞれのレイヤーの中にCSSを書くだけです。

@layer base {
  /* 土台となるスタイル */
  h1 {
    color: gray;
  }
}

@layer demo {
  /* 演出用のスタイル（最強レイヤー） */
  h1 {
    color: red;
  }
}

結果として、h1 は 必ず red になります。

理由はとてもシンプルで、demoレイヤーの方が偉い と最初に決めたからです。

@layer の本当にスゴいところ（最大の革命）

@layer 最大の特徴は、ここです。

レイヤーの優先順位は、セレクタの強さよりも優先される

これまでのCSS

#main_title {
  color: blue;
}

.red_text {
  color: red;
}

IDセレクタはクラスより強いため、
必ず blue が適用されます。

@layer を使った場合

@layer base {
  #main_title {
    color: blue;
  }
}

@layer demo {
  .red_text {
    color: red;
  }
}

クラスなのに red が勝ちます。

なぜなら、

base レイヤー ＜ demo レイヤー

だからです。

つまり、「IDかクラスか」よりも「どのレイヤーに属しているか」が最優先になる、ということ。

これが @layer がCSSの新常識 と言われる理由です。

5. @layer を使わないとどうなる？（Before / After）

@layer なしの世界（よくある地獄）

.header .title {
  color: blue;
}

#main .header .title {
  color: red;
}

• セレクタがどんどん長くなる
• どこで上書きしているか分からない
• 修正が怖い

@layer ありの世界

@layer base, utilities;

@layer base {
  .title {
    color: blue;
  }
}

@layer utilities {
  .title {
    color: red;
  }
}

• セレクタはシンプル
• 上書きの場所が一目瞭然
• CSSが壊れにくい

「レイヤーを見るだけで勝敗が分かるCSS」 になります。

よく使われるレイヤー構成例（これを真似すればOK）

実際の開発現場では、次のような構成がよく使われます。

@layer reset, base, components, utilities;

それぞれの役割は以下の通りです。

• reset：リセットCSS
• base：body・見出し・文字などの基本スタイル
• components：ボタンやカードなどの部品
• utilities：一時的・補助的な上書き（最強）

「どこに書けば上書きできるか」が一瞬で分かるCSS設計 になります。

CSS設計と @layer の相性が抜群な理由

BEMやutility CSSを使っている場合、@layer の効果はさらに大きくなります。

例：BEM × @layer

@layer base, components, utilities;

@layer components {
  .button {
    background: gray;
  }
}

@layer utilities {
  .is-primary {
    background: blue;
  }
}

• クラスの役割が明確
• 上書きの意図が明確
• 後から読んでも理解しやすい

CSSが「ルールとして読める」状態 になります。

@layer を使うメリットまとめ

• CSSを 設計として整理できる
• セレクタを無理に強くしなくていい
• !important を使わなくなる
• 後から修正しやすい
• チーム開発でも安全

※ @layer は、Chrome / Edge / Firefox / Safari などモダンブラウザで利用可能です。

この記事を読んだら、まずやること

1. CSSの一番上に @layer を書く
2. base / components / utilities だけ用意する
3. !important を消してみる

これだけで、CSSの書き心地が一気に変わります。

まとめ｜CSSを書く前に「レイヤー」を決めよう

• @layer はCSSをグループ分けして優先順位を管理する仕組み
• レイヤー名は自由（base / demo / apple でもOK）
• 最初に順番を宣言するのが最大のコツ
• CSSの「強さバトル」から解放される

これからCSSを書くときは、ぜひ

「これは土台？」
「部品？」
「一時的な上書き？」

と レイヤーから考える習慣をつけてみてください。

CSSは、ちゃんと設計すれば驚くほど気持ちよく書ける ものです。

ぜひ、魔法の言葉 @layer を使ってみてください