CSS Layer が使えるようになって 普段の Chrome の更新のときよりも新機能が話題になってます
Layer でライブラリを下にして自分のコードを上にすれば 「詳細度が足りないから詳細度を上げるためになくてもいいセレクタを追加をする」 ということは必要なくなります
Layer もいいですが それよりも詳細度なんて余計なものをなくしてくれた方が良いです

詳細度があると結局自分のコード中で詳細度のせいでムダなセレクタ追加は起こりえます
そのたびに Layer を作って優先度をあげることはできますが それは本来の Layer としての使い方は違って後々困りそうです
:root:root みたいなのをつけるのが Layer に変わっただけみたいなものです
詳細度を消して 後にあるものが優先されるという単純なルールにしてれば余計な苦労は一気に無くなるのですけど
順番だけで決まれば Layer でライブラリを下にして自分のを上にするというのもロード順を変えるだけです
Layer はあってもいいですが 詳細度なんて厄介なだけな機能はなくしてほしいです

新し目な機能は使用率が少ないからと廃止されたりするのに 古い機能は互換性優先で消されないのでどうせ詳細度は消えはしないだろうとは思ってました
それでも新機能な Layer ブロックの中なら詳細度を無視するようにしても互換性は保たれるので Layer の中に配置すれば無視されるみたいのを期待してたのですが そんなことはなく Layer 内では詳細度によって優先度が決まります

無理やり詳細度をなくそうとすると 全部のブロックの詳細度を同じになるよう CSS を書き換えることになります
それをやろうとすると最大詳細度を計算してそれぞれのブロックのセレクタを見て何を足せばいいのかを調べてと複雑でした

.foo .bar {
	color: red;
}
.baz {
	color: green;
}

だと .baz にクラスが一つ足りないので html タグに付けたクラス名を追加して .html .baz {} みたいに書き換えます
それが Layer を使えば

@layer {
	.foo .bar {
		color: red;
	}
}
@layer{
	.baz {
		color: green;
	}
}

のように全部を単純に @layer {} で囲むだけで済むので楽にはなります
ただそれぞれのブロックを Layer とするのはどうかと思うので実用はしたくないですけど

そんな感じなので最近は直接 CSS を書かずにライブラリの CSS-in-JS 機能で要素に直接指定する方向にしてます
要素単位なのでセレクタの概念はなくて プログラムでの埋め込み順になるので詳細度に縛られることはなくなります

それにしてもなんでこんな百害あって一理なしみたいな詳細度なんてシステムを導入してまったんでしょうか
全体はタグで指定して あちこちで指定するのはクラスで 特定の 1 箇所だけなら id だから id>class>tag で優先されるようにすると順番どう書いてもうまく動いて楽だから とかでしょうか
CSS が作られた頃はページも単純だったので それで困らなかったのかもしれませんが 複雑になってくると足を引っ張るだけになるとわかりそうなものですけど