長年開発を続けているページでは、Bootstrapなど、ページ自体のスタイルを丸ごと上書きしてしまうCSSライブラリが読み込まれていることがある。
一方、最近はReactコンポーネントを作って、スタイルはCSS Modulesで当てたい、という機会が増えている。
CSS Modulesを使うと、コンポーネントに適用スタイルを明示的に指定することができるが、そこにページ丸ごと上書きCSSライブラリが混ざってくると、思うようにスタイルが当たらない、ということになる。
たとえば、Bootstrapを読み込んだページのpタグには、margin bottom: 10pxのようなスタイルが問答無用で指定されてしまう。
こういうしがらみから逃れる手法は無いのかな、と思って、Bootstrapを読み込み済みの歴史のあるページでは、Shadow DOMなどを使ったらBootstrapの依存を消せますか？などとAIとチャットしていたら、all: unset, all:revertの存在を教えてもらった。
デモのHTMLを作ってもらって、GitHub Pagesにデプロイしている。
この3つのエリアは同じマークアップが並んでいて、左側は古いバージョンのBootstrap、真ん中は完全リセット、右側は、ブラウザ標準に戻す、という3パターン。
Bootstrapを入れると、pタグにmargin bottomが設定されてしまうのだけど、all:revertを使うと、その影響から逃れて、なにもスタイルが当たってない状態に戻すことができる。
たとえばReactとCSS Modulesを使って開発していて、まっさらなページにいろんなコンポーネントをマウントするカタログを作っているとする。
カタログでみたときは良かったのが、実際にBootstrapが読み込まれたページにマウントした途端、意図しない見た目になってしまう。
こういうときに、all:revertを親要素にしておくと、まっさらな要素にマウントするのと同じ扱いにできそう。
all:unsetはブラウザ初期の状態もなしで、すべてが同じ見た目になる。
フォントサイズの大小やボタンらしい見た目も無くなるので、いわゆるreset.cssのかわりに使えそう。
他に思いつく使い道としては、ユーザーが自由にテーマをカスタマイズできるページ内に広告を読み込みたい、そのときにユーザーが書いた変なスタイルが適用されてしまうのを避けたい、ということも考えられそう。
上のHTMLがぽいっと置いてあるだけだけど、一応リポジトリ。
GitHub - hitode909/escape-from-twitter-bootstrap-using-all-revert
