【CSS Modules】@layerアットルールの使い方

Copy
1/*
2 * @layer はCSSのカスケーディングレイヤーを定義するためのアットルールです。
3 * これにより、セレクタの特異性に関わらず、
4 * レイヤーの宣言順に基づいてスタイル適用の優先順位を制御できます。
5 *
6 * このサンプルでは、異なる目的を持つ3つのレイヤーを定義し、
7 * それらが最終的な要素のスタイルにどのように影響するかを示します。
8 */
9
10/* 1. base レイヤー:
11 *    基本的なスタイルやリセット、デフォルト値を定義します。
12 */
13@layer base {
14  h1 {
15    color: green; /* baseレイヤーでのh1の色は緑 */
16    font-size: 2em;
17    padding: 10px;
18  }
19}
20
21/* 2. components レイヤー:
22 *    特定のUIコンポーネントに関連するスタイルを定義します。
23 *    このレイヤーは `base` レイヤーの後に宣言されているため、
24 *    `base` レイヤーのスタイルよりも優先されます。
25 */
26@layer components {
27  h1 {
28    color: blue; /* componentsレイヤーでのh1の色は青 */
29    font-size: 2.5em;
30    border-bottom: 2px solid blue;
31  }
32}
33
34/* 3. utilities レイヤー:
35 *    特定の用途に特化した、再利用可能なユーティリティースタイルを定義します。
36 *    このレイヤーは `components` レイヤーの後に宣言されているため、
37 *    その前のすべてのレイヤーのスタイルよりも優先されます。
38 */
39@layer utilities {
40  h1 {
41    color: orange; /* utilitiesレイヤーでのh1の色はオレンジ */
42    font-size: 3em;
43    font-weight: bold;
44  }
45}
46
47/*
48 * @layer の優先順位の基本ルール:
49 * ----------------------------------
50 * 1. レイヤーは宣言された順序で評価されます。
51 *    後に宣言されたレイヤーほど、その前のレイヤーよりも優先度が高くなります。
52 *    この例では `base` < `components` < `utilities` の順で優先されます。
53 *
54 * 2. `@layer` の外で定義されたスタイル（アンレイヤー化されたスタイル）は、
55 *    通常、すべての `@layer` 内で定義されたスタイルよりも優先されます。
56 *    （ただし、`!important` ルールはこの優先順位をさらに変更しますが、
57 *    ここでは単純化のため扱いません。）
58 */
59
60/* レイヤーの外で定義されたスタイル */
61h1 {
62  color: red; /* レイヤー外でのh1の色は赤 */
63  text-decoration: underline;
64  margin-top: 20px;
65}
66
67/*
68 * このCSSが以下のようなHTMLの `<h1>` 要素に適用された場合:
69 * `<h1>CSS Layers Explanation</h1>`
70 *
71 * 最終的なスタイルは以下のようになります:
72 *
73 * - `color`: `red` (レイヤー外のスタイルが優先されるため)
74 * - `font-size`: `3em` (utilitiesレイヤーが優先され、レイヤー外に定義がないため)
75 * - `padding`: `10px` (baseレイヤーのスタイルが適用され、後のレイヤーやレイヤー外で上書きされていないため)
76 * - `border-bottom`: `2px solid blue` (componentsレイヤーのスタイルが適用され、後のレイヤーやレイヤー外で上書きされていないため)
77 * - `font-weight`: `bold` (utilitiesレイヤーのスタイルが適用され、レイヤー外に定義がないため)
78 * - `text-decoration`: `underline` (レイヤー外のスタイルが優先されるため)
79 * - `margin-top`: `20px` (レイヤー外のスタイルが優先されるため)
80 *
81 * このように、`@layer` を使用することで、スタイルの適用順序を明示的に制御し、
82 * 大規模なCSSプロジェクトでの保守性と管理を向上させることができます。
83 */

@layerは、CSSのスタイル適用における優先順位を整理し、管理しやすくするためのアットルールです。これにより、セレクタの特異性（特定の要素への詳細度）にとらわれず、開発者が意図的に定義したレイヤーの宣言順に基づいてスタイルの優先順位を制御できるようになります。このルールには引数や戻り値はありません。

サンプルコードでは、base、components、utilitiesという3つの異なる目的を持つレイヤーを定義しています。@layerは宣言された順に評価され、後に宣言されたレイヤーほど、その前のレイヤーで定義されたスタイルよりも優先されます。この例では、baseレイヤーの次にcomponentsレイヤー、そしてutilitiesレイヤーが続くため、優先順位はbase < components < utilities の順になります。

しかし、@layerのさらに重要な特性として、どのレイヤーにも属さない、つまり@layerの外で直接定義されたスタイル（アンレイヤー化されたスタイル）は、基本的にすべての@layer内で定義されたスタイルよりも最も高い優先順位を持ちます。このため、サンプルコードのh1要素のcolorプロパティは、utilitiesレイヤーでorangeと定義されていても、レイヤー外で定義されたredが最終的に適用されます。

このように@layerを利用することで、大規模なCSSプロジェクトにおいて、異なる機能やコンポーネントのスタイル間の衝突を避け、意図した通りの優先順位でスタイルを適用できるようになり、CSSの保守性と管理性が大きく向上します。

Copy
1/*
2 * CSS @layer は、スタイルシートのカスケーディング優先度を制御するための機能です。
3 * レイヤーの宣言順序が重要で、後に宣言されたレイヤーのスタイルほど優先度が高くなります。
4 * ただし、レイヤーに属さない通常のスタイルは、すべての @layer のスタイルよりも高い優先度を持ちます。
5 */
6
7/*
8 * @layer の宣言:
9 * ここでは、'base', 'components', 'utilities' の順でレイヤーを宣言しています。
10 * この宣言順序により、優先度は 'base' < 'components' < 'utilities' となります。
11 */
12@layer base;
13@layer components;
14@layer utilities;
15
16/*
17 * base レイヤーのスタイル定義:
18 * このレイヤーの優先度は最も低いです。
19 */
20@layer base {
21  .my-element {
22    color: blue; /* このプロパティは、より優先度の高いレイヤーで上書きされる可能性があります */
23    background-color: lightblue;
24    padding: 10px;
25  }
26}
27
28/*
29 * components レイヤーのスタイル定義:
30 * 'base' レイヤーより優先度が高いです。
31 */
32@layer components {
33  .my-element {
34    color: green; /* base レイヤーの color: blue; を上書きします */
35    font-weight: bold;
36  }
37}
38
39/*
40 * utilities レイヤーのスタイル定義:
41 * 'components' レイヤーより優先度が高いです。
42 */
43@layer utilities {
44  .my-element {
45    color: purple; /* components レイヤーの color: green; を上書きします */
46    border: 2px solid purple;
47  }
48}
49
50/*
51 * レイヤーに属さない通常のスタイル定義:
52 * このスタイルは、すべての @layer のスタイルよりも最も高い優先度を持ちます。
53 * したがって、上記のすべてのレイヤーで定義された 'color' プロパティを上書きします。
54 */
55.my-element {
56  color: red; /* utilities レイヤーの color: purple; を上書きし、最終的にこの色が適用されます */
57  text-decoration: underline;
58}

CSSの@layerは、スタイルシートのカスケーディング優先度をより細かく制御するための機能です。これにより、複数のスタイルルールが競合した場合に、どのスタイルが適用されるかを予測しやすくなります。@layer自体は引数を持たず、特定の値を返すこともありません。

まず、@layer base;のようにレイヤー名を宣言します。この宣言の順序が非常に重要で、後に宣言されたレイヤーほど、その中に記述されたスタイルの優先度が高くなります。例えば、base、components、utilitiesの順でレイヤーを宣言した場合、baseレイヤーのスタイルは最も優先度が低く、utilitiesレイヤーのスタイルが最も高くなります。

サンプルコードでは、.my-elementクラスに対して、まずbaseレイヤーでcolor: blue;が定義されています。次に、componentsレイヤーでcolor: green;が定義され、baseレイヤーのスタイルを上書きします。さらにutilitiesレイヤーでcolor: purple;が定義され、componentsレイヤーのスタイルを上書きします。このように、宣言順序に基づいてスタイルが適用されていきます。

しかし、最も重要な点として、どの@layerにも属さない通常のスタイルは、すべての@layer内のスタイルよりも高い優先度を持ちます。したがって、サンプルコードの最後に定義された.my-element { color: red; }という通常のスタイルが、utilitiesレイヤーのcolor: purple;を上書きし、最終的に要素の文字色は赤になります。

@layerを導入することで、大規模なプロジェクトでのCSSの管理がしやすくなり、スタイルの衝突を防ぎながら、意図した通りのデザインを適用できるようになります。