表示がバグっていたのを教えてもらった、CSSの詳細度

表示がバグったのを教えてもらった、詳細度を知った

なんかこの記事、途中のコードが長くてページ全体が広がっちゃってますね（コンテナ部の幅が%指定なせい？） pic.twitter.com/uaeDyQ1FWD
— miyaoka (@miyaoka) October 26, 2021

前にもこんな感じになったのを見たことがあったのだが、再現条件が分からず若干放置気味になっていたところ再発した。

普段 PC で書いて PC で見るのだけど、PC だとあまり出ない(し、本番環境にデプロイしたものをツイートするばかりで開発環境もあまり立ち上げていなかった)

コンテナの幅が%指定なせいかも？という意見をもらったのであとで調べるか〜と思ったら、yamanoku さんが

コンテナにかかってる min-w-min の影響ぽいすね。外すとスクロールバーがでなくなる。
— やまのく🐙あと4日 (@yamanoku) October 26, 2021

と教えてくれた。爆速すぎる。

たしかにmin-w-minを消したらいい感じになった(開発環境で確かめました)

miyaoka さん yamanoku さんリプライありがとうございます。

昨日、↑ の件に関して@tabemidayoも教えてくれたので、マークダウンに当ててる CSS が原因だと思って色々見てた。

結局原因はそこじゃなかったので不具合調査の下手具合が明らかになってしまっただけなんだけど、そのときに CSS の詳細度という概念を知った。

スタイルが重複していて、詳細度の問題で別のスタイルが当たっている……？という勘違いで詳細度について調べていました。結局違ったんだけど、まあ怪我の功名みたいなノリで知れたのでよかった。

あと最後の記事で「ポイント制じゃなくてバージョン番号っぽく考えたほうがいいよ！」みたいなことがサラッと書いてあって、他の解説記事はいったい……？みたいな気持ちになった。