W3 Watch Reference

例えば、下記のようなスタイル宣言があった場合、

<!-- HTML -->
<div id="sample">
  <span>text</span>
</div>

/* CSS */
div#sample span {
  color: green;
}

div span {
  color: blue;
}

span {
  color: red;
}

ソースコード上の記述順でいえば、color: red; が最後に書かれていますが、使用されているセレクタの「詳細度」から、実際には color: green; が適用されることになります。

もちろん、インラインスタイル （style 属性による要素への直接的な指定） や、!important を使用することで適用されるスタイルを変更することはできる他、:where() 疑似クラスのように、セレクタの詳細度を「0」にする方法なども存在しますが、CSS を記述する際に、「詳細度」を意識して記述することは基本となります。

@layer の働き

冒頭にも書いたとおり、この詳細度のコントロールを、レイヤー構造にしてより扱いやすくしようという仕組みが @layer 規則です。

具体的な例を挙げてみましょう。

span {
  color: blue;
}

span {
  color: red;
}

まず基本的なことですが、上記のように、詳細度が同じスタイル宣言が存在した場合、ソースコード上、後に記述された color: red; が要素に適用されます。これを @layer 規則を使用して下記のように書き換えてみましょう。

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

@layer utilities {
  span {
    color: red;
  }
}

この状態でも、ソースコード上、後に記述された color: red; が要素に適用されます。詳細度が同じなので、後に記述されたスタイルが適用されていると考えれば理解しやすいでしょう。

そこで、これを下記のように書き換えてみます。div span というセレクタの方が詳細度が高いため、@layer 規則を使用していない状態だと color: blue; が適用されるはずの記述になっていますが、@layer 規則を使用した場合は、カスケードレイヤー単位での優先順位が勝る （@layer utilities {...} の方が後に記述されている） ため、color: red; が要素に適用されます。

@layer theme {
  div span {
    color: blue;
  }
}

@layer utilities {
  span {
    color: red;
  }
}

しかし、この CSS ファイルの冒頭に、下記のような記述を加えるだけで、ソースコード上の記述順に関係なく、適用されるスタイル （カスケードレイヤー） の優先順位を変更することができます （color: blue; が要素に適用されます）。

@layer utilities, theme;

@layer theme {
  div span {
    color: blue;
  }
}

@layer utilities {
  span {
    color: red;
  }
}

このように、@layer 規則によって適切なカスケードレイヤーを定義しておくことで、スタイルのコントロールが容易になるでしょう。

ただし、スタイルのスコープ （適用範囲の絞り込み） に関しては別途セレクタの適切な選択によって行う必要があります。