個人ブログのスタイリングをUnoCSSから素のCSSに移行したヨ

このブログからUnoCSSを外して、AstroのScoped CSSと通常のCSSでスタイルを管理する構成にしました。なぜ入れて、なぜ外したのかと、移行の手順を残しておきます。

UnoCSSを入れたときの動機

正直なところ、Tailwind CSS全盛の中で逆張りしたかった、という気持ちがありました。

それに、当時はUnoCSSのオンデマンドなCSS生成がTailwind CSSより効率よく、画期的に思えました。より小さく導入できて、運用もしやすそうだと感じていたのも理由です。あくまで、当時の私の印象です。

JITとコンセプトの違い

必要なCSSをオンデマンドで生成する考え方は、両者に共通しています。Tailwind CSSも、v3.0でJITエンジンが標準になっています。¹

設計として、Tailwind CSSはユーティリティクラスを組み合わせてデザインするCSSフレームワークです。色や余白などの値をテーマとして管理し、それに対応するクラスを使えます。独自のユーティリティも追加できます。

一方、UnoCSSはルールやプリセットを組み合わせられるCSS生成エンジンです。コアに特定のユーティリティ一式を固定せず、検出したクラス名を文字列や正規表現のルールに照合してCSSを作ります。このルール群などをまとめたものがプリセットです。このブログでも、presetWind3、本文装飾用、アイコン用のプリセットを組み合わせていました。

なお、Tailwind CSSもv4.0でエンジンが刷新されています。実際は、当時とはまた違う印象でしょう。

今回、外すことにした理由

今の個人ブログのデザインや規模なら、AstroのScoped CSSで事足りると思ったからです。共通の値はCSS変数に置き、コンポーネント固有のスタイルはそのコンポーネントに書く。そのシンプルな仕組みで十分に運用できそうだと感じました。

依存を増やして、後から減らす作業自体をできるだけ無くした方が、続けやすいとも思っています。AI時代の攻撃や依存パッケージの安全性も気になる中で、置き換えて運用できるような依存は減らしておきたい、という気持ちもありました。

また、自分の性格やこれまでの職務経験もあって、CSSを書くことに苦痛を感じません。さらに今はAIも使いつつ書けるので、この規模なら自分で管理できると思ったのも理由です。

無論、そのままUnoCSSを活用し続けることもできたと思います。ただ、今のブログに入れ続ける必要もないな、と感じました。

少しずつScoped CSSへ移行した

先に移行のロードマップを簡単に作成しました。小さなコンポーネントやページごとに、作業・ビジュアルテスト・修正・コミット・pushを繰り返しました。

見出しやパンくずなどの共有コンポーネントから、ユーティリティクラスをScoped CSSへ移す。色や文字サイズには既存のCSS変数を使う。
アイコンをPhosphor Iconsへ置き換える。@phosphor-icons/coreから必要な10個のSVGだけをCSSのmaskで参照し、アイコン用のブラウザJavaScriptは追加しない構成にする。
ヘッダー、フォーム、各ページへ進み、JavaScriptで切り替えるクラスも置き換える。たとえば検索結果の表示制御は、.hiddenの付け外しからHTMLのhidden属性に移す。
記事本文の装飾とCSS resetを、それぞれtypography.cssとreset.cssへ移す。元のライセンス表記を残し、global.cssから読み込む。MDXのw-full h-autoなども、用途に合わせた通常のクラスへ置き換える。
生成されたHTMLも確認してから、最後にAstroのインテグレーション、uno.config.ts、関連パッケージを削除する。

表示確認では、日本語・英語、ライト・ダーク、モバイル・デスクトップで画像や寸法、ブラウザが計算したスタイルを比較しました。メニューや検索、テーマ切り替えなども操作して確認しています。

見落としやすかったのは、Markdownの変換処理が生成するクラスでした。外部リンクや脚注の戻りアイコンにもユーティリティが使われていて、ソースのclass属性を探すだけでは足りませんでした。脚注見出しを読み上げ用に残すsr-onlyも、通常のCSSとして明示しています。

結果的に直接依存7件とそれらに紐づくlockfile上の73パッケージバージョンが減りました。アイコン関連の依存は、それより前の段階で置き換えています。

ビルド時間も気になっていた点です。ログのServer built inは、移行途中の記録では24.84秒、削除後の--forceビルドでは10.50秒でした。ただし、実行条件やキャッシュをそろえた比較ではなく、この差がすべてUnoCSSによるものとは断定できません。バンドル処理だけの時間も、個別には計測していません。

最後に一言「個人開発は、なんでもできる」

業務では徹底的に比較して、「かくかくしかじかでAよりもBの方がいいと思うから選択する」と判断することもあります。一方、個人で作っているものは、なんでもできるのがいい点でもあり、厄介なところでもあると思います。

勉強という名目で、好奇心の赴くままになんでも作れるし、そのためになんでも活用できます。でも、入れた技術が永遠に使えるわけではありません。今は流行り廃りや、攻撃を受けることも含めて、変化が早いように感じます。

怖い、面倒だ、と言って何も作らず、何も使わずにいることもできます。ただ、人の性なのか、私の性なのか。どうせ今後も、なんとなく使ったものを性懲りもなくやめると言い出すのだろうなと思います。

以上。なんかスッキリしたのでメモを書き残しました。読んで頂いた方、本当にありがとうございます。

ちゃんちゃん。

JITはJust-in-Timeの略です。JITコンパイルはJust-in-Time compilationと表記します。ここでは、テンプレート内のクラスに応じて必要なCSSを生成する方式を指します。このブログではビルド時に生成しており、閲覧時にブラウザでCSSを生成する構成ではありません。