カスケードレイヤー @layer でCSSの設計・管理を効率化する

積極的に使っていきたいこれからのHTML&CSS ①

Table of Contents

Table of Contents

ここ数年、HTML&CSSの進化が大幅に加速してきました。『モダンHTML&CSS　現場の新標準ガイド』でも約200もの新機能を追加しましたが、さすがに全部は覚えきれません。というわけで、これから先、積極的に使っていきたいHTML&CSSについて書き留めていこうと思います。

まずは、CSSの設計・管理を大きく効率化してくれる3つの注目機能です。

  • カスケードレイヤー @layer
  • ネスト記法 CSS Nesting
  • CSSスコープ @scope

今回は、これらのうちの１つ目、カスケードレイヤーです。

カスケードレイヤー @layer で CSS を階層に分けて管理

カスケードレイヤー @layer を使うと、役割や目的に応じてCSSを分類し、「レイヤー（階層）」に分けて管理できます。優先順位はレイヤー単位で決まるので、煩わしい詳細度は同じレイヤー内だけで意識すればよくなります。

以前、「カスケードレイヤー @layer を導入した話 — はがしやすく、負の遺産にしないCSS」を書いたときには実際の使用例もほとんどありませんでした。しかし、あれから2年たち、「よくある使用例」も見えてきています。

特に、Tailwind CSS v4 で本格的に導入されたことから、目にする機会も一気に増えてきました。

CSSをどのようなレイヤーに分けて管理するのか？

問題はCSSをどのようなレイヤーに分けて管理するかです。基本的には、優先順位と役割が明確に異なるグループで分類します。

よくあるのは、次のようなレイヤーに分けるケースです。

レイヤー名説明
themeテーマレイヤー。色やフォントなどのデザイントークン（CSS変数）を管理。
resetリセットレイヤー。リセットCSSを管理。
baseベースレイヤー。グローバルで使用する基本的なスタイルを管理。
componentsコンポーネントレイヤー。コンポーネントごとのスタイルを管理。
@layer theme, reset, base, components;


/* テーマ */
@layer theme {
  :root {
    --color-primary: #3b82f6;
    --color-secondary: #7e22ce;
    --font-sans: "Inter", sans-serif;
  }
}


/* リセット */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
 }


/* ベース */
@layer base {
  body {
    font-family: var(--font-sans);
    color: CanvasText;
  }
}


/* コンポーネント */
@layer components {
  .card {
     display: grid;
       background: linear-gradient(to top right, var(--color-secondary), var(--color-primary));
    }
}

レイヤーは作成した順で優先順位が決まります。そのため、通常は1行目の @layer で必要なレイヤーをまとめて作成し、優先順位も同時にコントロールします。

この例では theme（テーマレイヤー）が最も低く、components （コンポーネントレイヤー）が最も高い優先順位になります。

@layer theme, reset, base, components;

あとは、@layer レイヤー名 {～} で、いつでも、どこからでもレイヤーにCSSを追加できます。1行目の @layer で優先順位は決まっていますので、フレームワークでCSSの適用順や統合順が変わったとしても、レイヤーの優先順位が変わる心配はありません。

なお、レイヤーに入れないで記述したCSSは優先順位が最も高くなります。そのため、すべてのCSSを上書きする手段として利用できます。

Tailwind CSS v4 に用意されたレイヤー

Tailwind CSS v4 の場合、リセットCSS に相当する設定が base （ベースレイヤー）に含まれます。さらに、ユーティリティクラス（p-8 といったクラス）を管理する utilities レイヤーが、最も優先順位の高いレイヤーとして加わります。

@layer theme, base, components, utilities;

これにより、ユーティリティクラスを使ってコンポーネントのCSSも上書きできる仕組みになっています。

コードの見通しをよくする効果とデバッグの効率化

CSSをレイヤーで管理することは、優先順位をコントロールするだけでなく、コードの見通しをよくする効果もあります。どの階層に位置するCSSなのか、ひと目で区別できるようになるからです。

それは、デバッグの効率化にもつながります。たとえば、デベロッパーツールの Styles（スタイル）タブでは、要素に適用したCSSがレイヤー単位で表示されます。上にくるものが優先順位の高いレイヤーです。

レイヤーなしのものと比べると、レイヤーがある方はどこから来たCSSなのかが明確になります。これにより、各CSSの目的や役割を把握し、問題を切り分けて確認するのが容易になるので、デバッグも捗るというわけです。

まとめ

正直なところ、小さなプロジェクトでは「CSSは記述順や詳細度にも気を配って書いてるし、詳細度を 0 にする :where() もあるし、わざわざレイヤー @layer を使わなくてもいいのでは…？」と思うこともありました。

ですが、優先順位をコントロールするだけでなく、「CSSの見通しをよくする」という効果も含めて考えると、やっぱり「カスケードレイヤーは積極的に使っていきたい」と感じます。

主要ブラウザは2022年に対応済みです。

次回は、CSSのネスト記法について見ていきます。カスケードレイヤーといっしょに使っていきたい、CSSの管理・設計を効率化してくれる機能です。