まだ!importantで消耗してるの？@scopeによる詳細度管理で脱!important

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

とある人気のWordPressテーマで使用されているこんなCSSを見つけました：

.wp-block-theme-button .button:not(.specificity):not(.extra-specificity)

.specificityと.extra-specificityというクラスが目を引きますね。いったい何をするのでしょうか。作者に直接聞くのが一番良い方法ですが、事実よりも自分の意見を押し付けたい人もいるでしょう。結局のところ、それがインターネットの基本ですからね！

おそらく:not()は、.wp-block-theme-buttonラッパー内の.button要素を選択しつつ、特定のコンテンツでより積極的にスタイリングされた.buttonに割り当てられた.specificityまたは.extra-specificityクラスを除外する方法なのでしょう。

/* 詳細度: 0 1 0 */
.button {}

/* 詳細度: 0 2 0 */
.button.specificity {}

/* 詳細度: 0 3 0 */
.button.specificity.extra-specificity {}

なんと斬新で賢い戦略でしょう！これは実質的に、スタイリングを含まず、必要に応じてセレクターの詳細度を上げるためだけに使用されるユーティリティクラスについて話しているのです。詳細度はデフォルトで低く設定されていますが、1つまたは両方の詳細度クラスを追加することで段階的に強くすることができます。

しかし、これは良いアイデアなのでしょうか？それはあなた次第です。あなたの考え方に合っていて、仕事をこなせるのであれば、どうぞご自由に。CSSは詩的で、同じことを多くの異なる方法で表現できます。これは単に、カスケード内でセレクターの優先度を上げるもう一つの方法に過ぎません。

きっと皆さんの中には、このアプローチを!importantの手の込んだ代用品としか見ない人もいるでしょう。もしかしたら、すでにこんな皮肉っぽいスニペットを始めているかもしれません：

.button.important {}
/* または */
.button.very.important {}

あるいは、さらに良いのは、:is()の引数に偽のIDを使用して人為的にスコアを上げる方法です：

/* 詳細度: 1 0 0 💪 */
:is(.button, #important) {}

繰り返しますが、誰かのやり方を非難するつもりはありません。これが無効だというルールはどこにもありません。（ちょっと待って、CSSを書くルールってあるの？！）

ただし、詳細度を管理するのに、人工的なクラスやIDを使用する方法（あるいはそもそも使用すること自体）よりも、もっと幸せな道があるかもしれないと私は考えています。例えば、これは@scopeの理想的なユースケースではないでしょうか？スコープ付きスタイルには、スタイルの開始点と終了点を設定するスコープ制限という素晴らしい機能があります。

@scope (.card) to (:scope > .button) {
  /* スタイルルールをここに記述 */
}

見てください：スコープのルート.cardを定義した後、toキーワードを使ってスコープ制限.buttonを定義しています。もしこれが私たちのマークアップだとしたら：

<article class="card">
  <img src="image.avif" alt="...">
  <h2>カードの見出し</h2>
  <p>カードの内容。</p>
  <a class="button" href="#">全文を読む</a>
</article>

...そうすると、CSSは.cardクラスがスタイルの開始点であるスコープのルートであることを認識し、そのスコープ内の.buttonクラスに到達したらそれらのスタイルの適用を停止します。スコープ制限を決めていなかった場合、カードの他のスタイルがボタンに意図せずマッチしてしまう可能性がある、例えばこんなスタイリングの衝突に遭遇していたかもしれません：

.card a {
  color: hsl(25, 100%, 50%);
}

これは.buttonには決して適用されません。なぜなら、私たちはセレクターにスコープ外に保つよう明示的に指示したからです。CSSは今やとても賢くなったので、もう二度と!importantを使う必要がなくなるかもしれません（すでに使っていないと言う人もいるでしょうが、例外はあるものです）。

詳細度に影響を与える擬似セレクター、スコープ付きスタイル、カスケードレイヤー、BEMのようなフォーマット戦略など、カスケードはかつてないほど管理しやすくなっています。そして、それをどのように行うかについての決まりはありません。私は単に、他の人がどのように状況に対処しているかを見て、自分ならどうするかを考えるのが好きなんです。自分を良く見せるためではなく、自分の理解や考え方に挑戦するためにね。