CSS沼レスキューを作った理由 — 「なぜ効かないのか」を可視化したかった話

「なんでこのCSS効かないんだ…」って画面を睨みながら30分溶かした経験、CSS書いたことある人なら多分全員あると思います。自分はあります。何度もあります。CSS沼レスキューは、その沼に落ちたときに秒で這い上がるための道具として作りました。名前は完全に自分の実体験からです。沼・沼・沼…からの脱出です！

詳細度の喧嘩を、可視化する

CSSが効かない原因の大半は、詳細度（セレクタの強さ）か!importantの殴り合い👊です。（important地獄とも言う…😱）
セレクタの強さを頭の中で計算するの、正直めんどくさいし間違えるので、対象要素と競合してるプロパティを入れるだけで「どっちが勝ってどっちが負けてるか」を目で見えるようにする診断機能を中心に据えました。

詳細度を理解されてる方にはあまりピンとこない問題かもしれませんが、結構この問題で悩まれる方は多いのです！というのも、小規模なCSSであれば特定は容易かもしれませんが、ある程度複数のCSSの読み込みが行われていると、何がどこでどういった詳細度で読み込まれているのかを読み解くのは結構面倒です、というか本当嫌！ｗ

ちなみに、通常のCSSセレクタの殴り合いにおいて最も最強のチート技が「インラインスタイル（HTMLタグのstyle属性に直接書く）」という力技です。外部CSSや<style>タグでどれだけIDやクラスを幾重にも重ねて詳細度（セレクタの強さ）を高めても、HTML側のタグに直接書かれたインラインスタイルが全てを力ずくでねじ伏せて最優先されます。

<!-- 外部CSSでどれだけ詳細度を高めても... -->
#main-content .article-box .text-highlight {
  color: blue;
}

<!-- HTML側に直接書かれた「インラインスタイル」が全てを薙ぎ倒して勝つ！ -->
<p class="text-highlight" style="color: red;">絶対に赤色になるテキスト</p>

「どうしても今すぐこの1箇所だけスタイルを当てたい！」「もう詳細度を計算するのも嫌だ！」というときの緊急脱出には、このインラインスタイルこそが文字通り最強の一撃です。……が、これを乱用し始めると後から外部CSS側で修正が一切効かなくなり、最終的にそのインラインスタイルを上書きするために!importantを持ち出すしかなくなるというさらなる深淵の沼（インラインスタイル vs !importantの頂上決戦）へ突入するので、まさに劇薬、諸刃の剣です…😅

変換ハブは後付けだった、しかもAIには頼らなかった

px⇔rem変換とかSCSS/LESS/Tailwindの相互変換をまとめた「フォーマット変換ハブ」も同じ道具に突っ込んであります。実はこれ、最初は詳細度診断だけで完結させるつもりだった後付けの機能です。案件によってCSSの書き方がバラバラで、こういう行き来が地味に頻繁にあります。

毎回手作業で変換してたんですが、ある案件でその作業に丸1日溶かしてしまい、「これもう自動化した方が早いのでは」と我に返って作りました。最近だとAIに変換を丸投げする方法もあるんですが、あえてルールベースの変換ロジックを自前で書きました。入出力の対応がはっきりしていて、毎回同じ結果が返ってくることを重視したかったからです。AIの応答を待つより、その場で即座に結果が出る方が作業のリズムを崩さずに済みます。後付けの機能だったはずが、今では自分が一番よく使う機能になっています。

• 詳細度診断(どのルールが勝ってるか可視化)
• px⇔rem変換
• SCSS/LESS/Tailwind相互変換

機能ごとに分けて公開する案もあったんですが、探す手間を考えたら1つの屋号の下に並べた方が絶対楽だろうという結論に落ち着きました。

地味な作業ほどまとめて置いておく価値がある、というのは作りながら実感したことです。

あと単純に、自分が一番このツールのヘビーユーザーだったりします。

CSSでアルカトラズ並みに脱出不可能になったら試してみてください…。👇