◆ 消えてほしい消えてほしい消えてほしい消えt

CSS の一番いらない機能が詳細度です
セレクタで id があるのが優先されたりするアレです
ムダに複雑にしてる上にコレのせいで思い通りにできずに important 地獄が始まります
important 以外の方法もありますが ムダに書くことが増えて読みやすさは最悪です
altCSS にあるネスト記法とも相性が悪いです
単純に後に書いたものが優先ならどれだけ楽になることか と毎回思います



タグ指定は優先度が低いので クラス指定と同程度まで優先度を上げるために :root をいっぱいセレクタの最初につけることで回避できます

:root:root:root .foo pre code {}

が なぜこんな見づらい裏技的な方法に頼らないといけないのか とイライラされられます



id を使うほうがわかりやすい部分でも 優先度的に大変なのでセレクタの最後以外に id をしないほうが良いです

a .b>#c {}

CSS のセレクタでは一番最後にあるのが対象となる要素で それ以前はそこに至るまでのパスです
この例でいうと #c がスタイリングする対象です
最後が id ならその要素自体を指定してるので優先度が高くても通常は問題ないです

最後以外が id だと最後は広範囲を表すタグやクラス名でも優先度が上がってしまいます
最後以外に id を使わないようにすると id だけしかない要素にわざわざクラスを付ける必要が出たり余計な手間を掛けられます



ネストできる altCSS ではネストがそのままセレクタになります
書く側はどこを指定してるのかわかりやすくて便利なのですが 具体的に指定せず全体に対してクラス指定で使いたいセレクタ (.foo だけみたいなもの) が勝てなくなります



詳細度がやっかいなだけという意見は少なからずあるのに ずっとこのままなのも互換性問題でしょう
ドキュメント単位で CSS 解釈方法を変えるモードプロパティを追加してくれたら良いのですけどね

altCSS の変換で全部の詳細度を同じようにルートセレクタを付与してくれるものとかないのかな
CSS パーサがあれば簡単に作れそうですけど

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
0. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
1. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
2. ID selectors (e.g., #example).

の 3 つなので

#aaa .bbb input {}
.ccc {}
.ccc .ddd:hover {}
pre code.js {}
div.eee::before {}
#x #y {}

とあると それぞれは

0 1 2
1 1 1
0 1 0
0 3 0
2 1 0
2 1 0
0 0 2

となります
行がコードの行と対応していて 0, 1, 2 は引用にある詳細度の番号です

一番多いのに合わせるので 2, 3, 2 にします
root の html タグに属性を設定します

<html id="html" class="html">~</html>

変換後の CSS は

html#html.html.html             #aaa .bbb input {}
html:not(a)#html#html.html.html .ccc {}
html:not(a)#html#html .ccc .ddd:hover {}
#html#html.html.html pre code.js {}
#html#html.html.html div.eee::before {}
html:not(a).html.html.html #x #y #z {}

となります
ルートの html を何度も書くことで詳細度を増やして全部同じになるようにしてます
html というタグ名を複数回指定できないので :not(a) を使うことで 0 のセレクタの数を増やしています