前回は、@layer を使うことで「CSSの優先順位をグループ単位で管理できる」ことを解説しました。

今回はその続きとして、
*HTML側でも layer 属性は使える
* CSSファイルをレイヤーごとに分ける方法
* 外部ライブラリやプラグインCSSを整理する方法
を、実務目線で分かりやすく解説していきます！

まずはレイヤー構成を決める

実務では、最初にレイヤー構成を決めておくと管理がかなりラクになります。
例えばこんな感じです。

@layer framework, reset, base, layout, components, utilities;

右に行くほど優先度が高くなります。
framework ＜ reset ＜ base ＜ layout ＜ components ＜ utilities
それぞれの役割はこんなイメージです。

@layer vendor, default, parts;

のような名前でも動作します。ただし実務では、「何が入っているか分かる名前」にするのがおすすめです。

HTML側でも layer 属性は使える

通常のCSS読み込みはこんな感じですよね。

<link rel="stylesheet" href="reset.css"> 
<link rel="stylesheet" href="style.css">

これを layer 属性付きで読み込むことができます。

<link rel="stylesheet" href="reset.css" layer="reset">
<link rel="stylesheet" href="style.css" layer="components">

これだけで、それぞれのCSSファイルを指定したレイヤーとして扱えます。

つまり、

• reset.css → resetレイヤー
• style.css → componentsレイヤー

という管理ができるようになります。

さらに、CSS側でレイヤー順を定義しておけば、優先順位も整理できます。

@layer framework, reset, base, layout, components, utilities;

※ この順番定義は、共通CSSやメインCSSなどで最初に1回書けばOKです。

CSSファイルをレイヤーごとに分ける方法

CSSが大きくなってくると、1ファイル管理はかなり大変になります。

そこで、役割ごとにCSSを分けておくと管理しやすくなります。

例えばこんな構成です。

css/
├── reset.css
├── base.css
├── layout.css
├── components/
│   ├── button.css
│   └── card.css

そして、それぞれを対応するレイヤーとして読み込みます。

<link rel="stylesheet" href="reset.css" layer="reset"> 
<link rel="stylesheet" href="base.css" layer="base">
<link rel="stylesheet" href="layout.css" layer="layout">
<link rel="stylesheet" href="button.css" layer="components">

こうしておくと、

• どこに書けばいいか
• どのCSSが強いか
• なぜ上書きされたか

が非常に分かりやすくなります。

外部ライブラリやプラグインCSSを整理する

@layer が特に便利なのが、外部CSSとの管理です。

例えば、プラグイン側にこんなCSSがあるとします。

.button { background: gray; }

自分側では、

.button { background: blue; }

普通なら プラグイン側の.button の方が詳細度が高いため、自分のCSSは負けてしまいます。

しかし、

@layer framework, components;

という順番にしておけば、componentsレイヤーの方が優先されます。

つまり、

• framework → 外部CSS
• components → 自分のCSS

という形に整理することで、無駄に詳細度を上げなくても管理しやすくなります。

CDNのCSSもレイヤー化できる

CDNで読み込むCSSも、layer() を使えばレイヤー管理できます。例えば Swiper のCSSを読み込む場合、通常はこう書きます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

ただ、このままだと「どのCSSが優先されるか」が分かりづらくなることがあります。

そこで、CSSファイル側で @import + layer() を使います。

@layer framework, components;

@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css") layer(framework);

• Swiperなど外部ライブラリ → framework
• 自分で書くCSS → components

という形で整理できます。

まとめ

@layer を使うと、

• CSSの優先順位
• ファイル構成
• 外部CSSとの関係

を、最初に整理できるようになります。

これまでのCSSは、

• 詳細度を上げる
• 読み込み順を調整する
• !importantで強制する

という対応が必要でした。

しかし @layer を使えば、

「これは土台」
「これはコンポーネント」
「これは最優先」

というルールを最初に決められるため、CSSがかなり管理しやすくなります。