個人開発のWebアプリのCSSフレームワークには長らくBulmaを使用していた。 Bulmaはレスポンシブデザインに対応しており、JavaScriptを使用しないという点も気に入っていたところだが、ファイルサイズが大きく、大量に使用しないスタイル定義が埋め込まれてしまっていることに不満を持っていた。

もともと、Vueで開発していてコンポーネントライブラリに、Vuetifyを使用していた。 このVuetifyは、Vue専用のWebコンポーネントのライブラリであり、簡単な記載できれいな画面を作成できる。 また、Vuetify自身にカラーテーマを内包しており、少ない記述でそれなりのデザインが実現できた。 開発が楽で気に入っていたのだが、当時、Vuetifyが長らくVue3に対応されないことに見切りをつけ、書き方が簡単で扱いやすいということもあり、Svelteに移行するタイミングでVuetifyの使用をやめた。

Vuetifyを使用していていくつか不満があった。

• 少し複雑なものを実装しようとすると、コンポーネントのマニュアルを熟読する羽目になる
• デバッグ時切り分けが難しい。結局HTMLを読む羽目になるのであれば、最初からHTMLで実装したほうが楽
• コンポーネントライブラリを使用すると、フレームワークのバージョンアップや、移行（Vue→Svelte）の際に大変

そのため、Svelteに移行した際、コンポーネントライブラリの使用は取りやめ、「Svelteで生成したHTML・CSS」＋「CSS スタイルシステム」の組み合わせに変更した。 部品自体はHTMLのみで実装、外観をCSSスタイルシステムで整えるという形の方式。 この時にCSSスタイルシステムにBulmaを採用して今に至る。 TailwindCSSの使用も考えたのだけれどもTailwindはコーディング量が多く、ソースが読みにくくなるということもあり、採用しなかった。

コンポーネントライブラリを使用していた場合、VueやSvelteを使わない環境では別途コンポーネントの実装が必要になってしまう。 「CSS スタイルシステム」で外観を整える方式であれば、Svelteを使用せずにHTMLで作成した画面にも統一感を持ったレイアウトをあてられるので非常に使い勝手が良かった。

ただ、最近はBulmaを取りやめて、CSS スタイルシステムを使用しない、独自CSSでの実装に移行しつつある。 カラーテーマ用のCSSファイルを作成し、CSS変数でカラーテーマを定義し、各画面・コンポーネントが参照する。 SvelteのScoped Styleで各画面・コンポーネントのスタイルは閉じた中で実装するので、他画面に影響はできにくい。 また、必要な分のみ実装するため、不要な定義を参照することがなく、見通しが良くなった。