CSSを書いていて、あるコンポーネントに当てたはずのスタイルが思わぬ場所まで波及してしまった経験は、制作に携わる人なら一度はあるはずです。ページ全体に効くというCSSの性質は便利な反面、扱う要素が増えるほど管理を難しくします。この課題に正面から向き合う@scopeという仕組みが、Firefox 146の対応で主要ブラウザに出そろい、Baselineの新しく使える機能に加わりました。

これまでのCSS管理が抱えていた悩み

ウェブサイトのスタイルは、原則としてページ全体に対して効きます。あるボタンの色を変えたつもりが、別の場所にある似た要素まで巻き込んでしまう。ページ数が少ないうちは目視で追えますが、扱う画面が増え、複数人で長く運用するようになると、どこに何が効いているのかを把握しきれなくなっていきます。

こうした事故を避けるため、制作現場では長らく命名規則という工夫が使われてきました。BEMのように、クラス名へ役割や階層を細かく書き込む方式です。名前が重複しなければスタイルも衝突しない、という考え方で、多くの現場を支えてきた実績があります。

ただ、この方法はクラス名が長くなりがちで、書き手によって命名の揺れも生まれます。CSSの設計を保つために、人間の側が規律を守り続ける必要がありました。過去にはShadow DOMのように構造ごと分離する手段もありましたが、導入のハードルは低くありません。@scopeは、この範囲を区切るという役割を、CSSの標準機能そのもので肩代わりしようという発想です。

@scopeが実際にどう書けるのか

基本の形はシンプルです。適用範囲の起点となる要素を指定し、その内側だけにスタイルを効かせます。たとえば@scope (.card) { img { border-radius: 8px; } }と書けば、.cardの内側にある画像だけに角丸が当たります。同じimgでも、カードの外にある画像には影響しません。セレクタを.card imgのように長く連ねなくても、範囲を宣言するだけで意図が伝わります。どの要素にどのスタイルが効くのかが宣言の形からそのまま読み取れるため、後から見返したときの分かりやすさにもつながります。

この範囲の起点を、スコープの上限と呼びます。範囲の中で使える:scopeという擬似クラスは、その起点そのものを指し示すものです。囲った領域全体の背景や余白をまとめて整えたいときなど、起点の要素自体にスタイルを当てたい場面で役立ちます。

下限を決めて入れ子の穴をつくる

@scopeのもう一つの特徴は、範囲の下限も指定できる点です。起点と終点の二つを書くと、その間にある要素だけが対象になります。@scope (.card) to (.card__body) { ... }のように書けば、.cardから.card__bodyの手前までが範囲になります。

カードの中にさらに別のコンポーネントが入れ子になっている場面を思い浮かべてください。外側のカード用のスタイルが、内側に置いた小さな部品まで無用に踏み込んでしまうと、見た目が崩れます。下限を切っておけば、その内側は範囲の外として扱われ、影響を受けません。中央に穴が空いたドーナツになぞらえて、ドーナツスコープと呼ばれることもあります。ニュース一覧の中に埋め込みカードが混ざるような、実際のサイトでよくある構造で効いてくる機能です。