カスケードレイヤーを使ってみる！

目次

• デモ
• 解説

解説

実際にカスケードレイヤーを使ってみます。

よくあるパターンとしては.mce-content-body中にp全体に赤い文字を適用します。

これだと詳細度が高くなってしまうので、後から詳細度が低いCSS当てる時負けてしまうことがあります。

それをカスケードレイヤーを使って詳細度をコントロールすることが可能です！

<div class="mce-content-body">
  <p class="text-red">piyo</p>
  <p class="text-blue">piyo</p>
</div>

@layer main, overwrite;

@layer main {
  .mce-content-body p {
    color: red;
  }
}
@layer overwrite {
  .text-blue {
    color: blue; /* 本来ならこちらのスタイルが打ち消されるが@layerで上書きすることが可能 */
  }
}

以下のようにデベロッパーツールでレイヤー順を確認することが可能。

画像のように0: main, 1:overwriteとなっている。

デモ

参考

オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage

Object-Oriented Conference 2024​​ https://ooc.dev/2024/ で喋ったスライドです。

speakerdeck.com