知ってて損しない@layerの話 #CSS

はじめに

こんな壮大なタイトルを書いていますが、私自身つい最近まで@layerの存在さえ知りせんでした。
なぜ知り得たかというと参画先のFEチーム内で、普段使っていない技術や知識を取り入れる取り組みとしてcodepenで実例を出しながら簡単なLTをする機会があったからです。

ここで紹介する@layerは、そのLTでCSSをピックアップするキッカケになったState Of CSSのFEATURES OVERVIEW（利用率の概要）で見つけました。

カスケードとは

カスケードとは、スタイルを適用する際の優先順位を示したものです。
CSSファイル内に同様の記述がある場合や、複数ファイル読み込んでいた場合に、どのスタイルを適用すればいいのか判断する順序が決められています。

Origin and Importance

Context

Element-Attached Styles

Layers

Specificity

Order of Appearance

カスケードレイヤー

カスケードにあるように、カスケードレイヤー(Layer)は詳細度（Specificity）や記述順(Order of Appearance)に影響されずに使うことができます。

カスケードレイヤーの使い方

レイヤーを定義する

カスケードレイヤーを使うためにまずレイヤーを定義する必要があります。

@layer base {
    .test { color: red; }
}

上記のように@layerに加えてレイヤーの名前を記載し、カッコ内にCSSを記載します。
もしくは具体的なCSSは記載せずに、レイヤーを定義することも可能です。

@layer base;

また、複数のレイヤーをまとめて定義することも可能です。

@layer base, component, project;

この場合は後に書いたレイヤーであるprojectの優先順位が一番高くなるので、各レイヤーの順序を明確にできます。

レイヤー使う上で注意すること

レイヤーは詳細度より優先されると書きましたが、それぞれ競合するスタイルをレイヤーに入れるとどうなるか見てみましょう。
通常のCSSであればこのようになります。

/* 詳細度 0-1-1 */
p .sample { font-size: 12px; }

/* 詳細度 0-1-0 */
.sample { font-size: 16px; }

/* p .sampleの font-size:12px が適用される */

しかし、それぞれをレイヤーに入れると

@layer test1 {
/* 詳細度 0-1-1 */
  p .sample { font-size: 12px; }
}

@layer test2 {
/* 詳細度 0-1-0 */
  p { font-size: 16px; }
}
/* レイヤーtest2の font-size:16px が適用される */

レイヤーが定義された順になるので、レイヤーの中の詳細度が低かったとしてもスタイルが適用されることになります。

また、レイヤーの定義で一番最後に定義したレイヤーの優先順位が一番高いと書きましたが、以下のようになります。

@layer blue, red;
/* ここでレイヤーの順序を確立しているので、それぞれのレイヤーを逆に記載してもredが適用される */

@layer red {
    p { color: red; }
}

@layer blue {
    p { color: blue; }
}
/* pタグ内のテキストカラーはredになる */

レイヤー同士の優先度がどのようになるかはわかったところで、レイヤーを持たないスタイルと競合したときは以下のようになります。

/* h1タグにtitleというクラス名を持つ */

h1 { color: green; }

@layer title {
    .title { color: red; }
}
/* この場合、h1タグのテキストカラーはgreenになる */

この場合はレイヤーを持たない（implicut layer）スタイルが最優先されます。

レイヤーをネストする

レイヤーはネストすることもできます。

@layer base {
    p { margin-bottom: 8px; }
}

@layer framework {
    @layer base {
        p { border: 1px solid #ddd; }
    }

    @layer theme {
        p { color: blue; }
    }
}

このとき、baseと、frameworkにネストしているbase(framework.baseとも表記できる)は別物になります。
すでに、レイヤーの優先順位を指定しているので、ネストを複雑にすると保守性が低くなってしまうのでご注意ください。

まとめ

複数のCSSファイルの読み込みや!importantの乱用、他にも様々な手法があるCSSは複雑化しやすいです。
詳細度によってより複雑に書き連ねていかないといけない部分が、それぞれのレイヤーを意識することで整理もしやすくより良い運用ができると思います。

また、デザインデータのレイヤーとも似た感覚があり、設計段階からより使いやすくなるかもしれません。

複雑化したものを一挙に改善できるほどの救いの手にはならないかもしれませんが、このような経験がある方には今後新しいものを作るときのひとつの方法として役立てたら嬉しいです！

最後に

この記事を書くために他のメンバーは何を寄稿しているのか読みに行った際、古川さんの記事でNIJIBOXがState Of CSSのスポンサーになっていることを知りました。
執筆前にState Of CSSのことは知っていたのですが最初は全然気付かず、改めてNIJIBOXのロゴが並んでいるのを見て感慨深かったです。

そして、新たな技術や知識を取り入れるよう時間を設けてくださったチームに感謝しています！
もっとみなさんのお役に立てる記事が書けるようにがんばります！

参考

CSS Cascading and Inheritance Level 5