【CSS Modules】layer()関数の使い方

Copy
1/*
2 * CSS カスケードレイヤーのサンプルコード
3 *
4 * `@layer` ルールは、CSSのカスケードの順序を明示的に制御するために使用されます。
5 * システムエンジニアを目指す初心者の方にも理解しやすいよう、基本的な使い方と優先順位について説明します。
6 *
7 * レイヤーは、スタイルをグループ化し、そのグループ間のカスケード優先順位を定義します。
8 * `@layer` は関数ではありませんが、リファレンス情報にある「layer()」が指す概念として、
9 * CSSのレイヤー機能（`@layer` ルール）の最も関連性の高い使い方を示します。
10 */
11
12/* 1. レイヤーの順序を宣言します。
13 * `@layer layer1, layer2, layer3;` のように宣言すると、
14 * 後に書かれたレイヤーほど優先度が高くなります（`layer1` < `layer2` < `layer3`）。
15 * この例では、`base` < `components` < `utilities` の順で優先度が高くなります。 */
16@layer base, components, utilities;
17
18/* 2. `base` レイヤーにスタイルを定義します。
19 * アプリケーションの最も基本的な（リセットやデフォルトの）スタイルを定義するのに使われます。 */
20@layer base {
21  p {
22    color: green; /* `p` 要素の基本色は緑 */
23    font-size: 16px;
24    margin: 5px 0;
25  }
26}
27
28/* 3. `components` レイヤーにスタイルを定義します。
29 * ボタン、カード、ナビゲーションなどのUIコンポーネント固有のスタイルを定義するのに使われます。 */
30@layer components {
31  /* ここでは、`p` 要素の背景色を定義します。 */
32  p {
33    background-color: lightblue; /* `p` 要素の背景色は水色 */
34  }
35
36  /* `.text-primary` クラスを持つ要素のテキスト色を青にします。
37   * このセレクタは `p` タグよりも詳細度が高いため、通常は青が適用されます。 */
38  .text-primary {
39    color: blue; /* プライマリーテキスト色は青 */
40  }
41}
42
43/* 4. `utilities` レイヤーにスタイルを定義します。
44 * 再利用可能な小さなユーティリティースタイル（例: `text-align: center;` など）を定義するのに使われます。
45 * このレイヤーのスタイルは、`base` や `components` レイヤーのスタイルよりも優先度が高いです。 */
46@layer utilities {
47  /* `p` 要素のテキスト色を赤にします。
48   * このスタイルは、`base` レイヤーの `p { color: green; }` を上書きします。
49   * しかし、`components` レイヤーの `.text-primary` の方が詳細度が高いため、
50   * `.text-primary` が適用される場合は青が優先されます。 */
51  p {
52    color: red; /* ユーティリティにより `p` 要素の色は赤に上書き */
53    border: 1px solid red;
54  }
55
56  /* `.text-highlight` クラスを持つ要素のテキスト色を紫にし、太字にします。
57   * これは非常に高い優先度を持つユーティリティとして機能します。 */
58  .text-highlight {
59    color: purple; /* ハイライト色は紫 */
60    font-weight: bold;
61  }
62}
63
64/* 5. レイヤー外の（アンレイヤードな）スタイル
65 * `@layer` ルールで定義されていないスタイルは、デフォルトでは全てのレイヤーよりも高い優先度を持ちます。
66 * これは、既存のCSSとの互換性を保つための重要な設計です。
67 * ただし、`!important` が使用された場合は、`!important` の規則が適用されます。 */
68p {
69  color: orange; /* レイヤー外の `p` 要素の色はオレンジ */
70  /* このスタイルは、詳細度が同じである限り、`utilities` レイヤーの `p { color: red; }` よりも優先されます。
71   * 結果として、単なる `p` 要素はオレンジ色になります。 */
72  text-decoration: underline;
73}
74
75/*
76 * このCSSを適用するHTMLの例:
77 *
78 * <p>標準のパラグラフ</p>
79 *   <!-- 結果:
80 *        color: orange; (レイヤー外のpが優先)
81 *        background-color: lightblue; (componentsレイヤーのpが優先、レイヤー間の優先度と詳細度により)
82 *        text-decoration: underline; (レイヤー外のp)
83 *        border: none; (レイヤー外のpがborderを定義していないため、utilitiesレイヤーのborderは適用されない)
84 *   -->
85 *
86 * <p class="text-primary">プライマリーテキストのパラグラフ</p>
87 *   <!-- 結果:
88 *        color: blue; (.text-primaryがpタグより詳細度が高いため優先)
89 *        background-color: lightblue; (componentsレイヤーのp)
90 *        text-decoration: underline; (レイヤー外のp)
91 *   -->
92 *
93 * <p class="text-primary text-highlight">ハイライトされたプライマリーテキストのパラグラフ</p>
94 *   <!-- 結果:
95 *        color: purple; (.text-highlightが最も詳細度が高いため優先)
96 *        background-color: lightblue; (componentsレイヤーのp)
97 *        text-decoration: underline; (レイヤー外のp)
98 *   -->
99 */

@layerルールは、CSSのスタイル適用順序（カスケード）を開発者が明示的に制御するための機能です。リファレンス情報にあるlayer()は関数として記載されていますが、CSSの@layerは、スタイルをグループ化し、そのグループ間の優先順位を定義する「アットルール」であり、直接引数を取る形式ではなく、特定の値を戻すこともありません。

サンプルコードでは、まず@layer base, components, utilities;と宣言することで、base、components、utilitiesの順でスタイル適用における優先度が上がります。これは、後に書かれたレイヤーほど優先度が高いことを意味します。

baseレイヤーはアプリケーションの基本的なスタイルを、componentsレイヤーはボタンなどのUIコンポーネント固有のスタイルを、utilitiesレイヤーは再利用可能なユーティリティースタイルを定義するのに適しています。例えば、p要素のcolorは、baseレイヤーではgreen、utilitiesレイヤーではredと定義されていますが、utilitiesの優先度が高いため、レイヤー間の競合においてはredが適用されます。

しかし、最も重要なのは、@layerルールで定義されていない「レイヤー外のスタイル」が、全てのレイヤー内のスタイルよりも高い優先度を持つという点です。このため、サンプルコードの最後に書かれたp { color: orange; }は、レイヤー内のp要素のcolor設定を上書きし、最終的にオレンジ色が適用されます。

レイヤー内でスタイルが衝突する場合、通常のCSS詳細度ルールが適用されます。例えば、pタグのスタイルよりも、.text-primaryクラスのスタイルの方が詳細度が高いため、優先して適用されます。この@layerルールを活用することで、大規模なプロジェクトにおけるCSSの管理が容易になり、予期せぬスタイルの上書きを防ぐことができます。