愛用していた（ほぼ）クラスレスCSSフレームワーク「PicoCSS」のメンテナンスが終了してしまいました。
公式の案内によると、v2.1.1が最後のリリースになるそうです。
筆者のサイトをはじめ、いくつかのプロジェクトで使ってたし、今も新しいプロジェクトで採用する候補の筆頭となるフレームワークです。
Sassで好みに調整してビルドしたり、足りないところを独自で補ったりと、使いながら馴染んできたものだから、簡単には手放したくありませんでした。
PicoCSSはリリースの間隔こそ長けれど、v1からv2へのアップデートでは大きく進化し、見た目やアクセシビリティだけでなく、カラーパレットやカスタマイズの仕組みまでしっかり見直されていました。
だからこそ、次のv3ではどう変わるのか楽しみにしていました。
しかしPicoCSSはGitHubで約1.7万スターを集めている実績のあるプロジェクトです。
スターが多ければ安心というわけでもないけれど、これだけ支持されているフレームワークが終わるとは、あまり想定していませんでした。
HTMLを素直に書けるのが好み
PicoCSSを気に入っていた一番の理由は“HTMLを素直に書けること”でした。
Tailwind CSSのようなユーティリティファーストの書き方には、便利な場面や使い方、もしくは設計があるのは分かりますが、スタイルを指定するクラスをずらずら並べるのが、どうにも受け付けませんでした。
なるべくHTMLは意味に沿ってシンプルに書いて、デザインはCSSに任せたい。
PicoCSSなら、見出しやボタン、フォームといった標準の要素を置くだけで、ひとまず見栄えが整います。
必要なところにクラスを足すことはあっても、最初からフレームワーク独自の書き方を覚えなくても整います。
元々いわゆるクラスレスフレームワークが好きで、色々調べている中で、使いでが良かったPicoCSSが馴染んだ、という感触です。
そのよさが改めて腑に落ちたのが、Zennの「デザインがときめくPico CSSの魔法」という記事でした。
具体的な使い方や魅力はこちらに詳しく書かれているので、ぜひ読んでみてください。
いっそ自作するか・・・？
保守終了の知らせを聞いて、いっそ似たものを自作しようかとも考えました。
PicoCSSの好きなところを継承しつつ、light-dark()やoklch()、@layer、Nested CSSなどモダンな仕組みを活用し、SASSを使わない小さなクラスレスCSSを作るのも面白そうに感じました。
でも、作るのと保守するのはまた別の話。
ブラウザの変更を追って、不具合を直して、使い続けられる状態を維持する。
もしコミュニティが大きくなってくると、コミュニティの運営まで行うことになり、そこまで引き受けるとなると、話は変わってきます。
情熱が続く限りはいいんですが、明日の自分がどうなっているかは分からない。
これまで使わせてもらったことに感謝しつつ、自作はひとまず置いて、ほかにいい選択肢がないか探してみることにしました。
代わりになるものを探す
探したのは、標準HTMLをなるべく活かせて、基本的な見た目が整い、フォームや小さなWebアプリにそのまま使えるもの。
クラスレスで使えて軽くて、カスタマイズしやすければなおよし。
独自のクラスや要素、お作法を大量に覚えるのは避けたいところです。
候補に挙がったのはSimple.css、MVP.css、Blades CSS、Beer CSSあたりです。
Simple.cssやMVP.cssは手軽だけれど、筆者が作るフォーム中心の画面や小規模アプリまで考えると、もう少し部品が欲しくなります。
なかでもBlades CSSは、PicoCSSからフォークされたものであり、移行先としてかなり素直な候補です。
PicoCSSとの互換性を掲げていて、CSSファイルを差し替えるだけで使える構成も用意されています。
これまでのHTMLを大きく変えずに済みそうなのは魅力的ですが、筆者のサイトのようにSassでカスタマイズしている場合、設定までそのまま移せるかは別途確認が必要です。
でも今のところは、単にPicoCSSを置き換えるより、これから長く使うことを考えて別の選択肢も検討してみたい。
Beer CSSも割と好みの設計思想で、以前に少し使ったことがありました。
Material Designを素直なHTMLで書けるという考え方は好きだったんだけど、いざ使うと独自のお作法を調整する場面が多くて、思うように扱えませんでした。
見た目を整えるためにHTMLの書き方をあまり変えたくない、というところに結局戻ってきます。
Oat UI、これ結構いいかもしれない
そんな中で見つけたのがOat UIです。
2026年10月にv1.0.0が出たばかりなのに、GitHubではすでに5,000を超えるスターが付いており、若いプロジェクトとしてはかなり注目されている印象で、今後にも期待しています。
ただ、PicoCSSの例もあるので、スターの数だけで将来が約束されるわけではありません。
気になってドキュメントを読んでみると、セマンティックHTMLを大事にしていて、軽量で、依存関係もない。
基本は標準の要素や属性を活かしながら、必要なUIを用意するという考え方のようです。
PicoCSSで好きだった方向性にかなり近く、そこに惹かれました。
しかもOat UIは、フォームなどの基本的な見た目だけでなく、Webアプリ向けの動的な部品も用意しています。
PicoCSSでは自分で補っていたところや、お作法を調整していた部分をうまく吸収してくれるかもしれません。
Oat UIがPicoCSSの後継というわけではありませんが、筆者には両者の考え方に近いものを感じます。
もちろん、全部が素のHTMLだけで済むわけもなく、一部には独自属性やWeb Componentsを使うし、そのあたりの使い心地は追々試していきたいところです。
個人的には、標準HTMLでできることは、なるべく標準HTMLでやりたいので、<details>や<dialog>、Popover APIのようなブラウザ標準の機能が充実して広まってきたら、独自の仕組みを減らす方向に進んでくれることを期待します。
どうでもいいですが、Beerの次に気になったのがOatとは・・・麦つながりになりました（笑）。
移行を進めてみて
実際にPicoCSSからOat UIへの移行作業を少しずつ進めていますが、今のところ思っていたより素直に進んでいます。
もともとPicoCSSには独自のお作法が少なく、Oat UIも標準HTMLを活かす設計なので、HTMLを大きく組み替えずに済むところが多い印象です。
まだリリースには至っていないので、移行を終えたという話ではありません。
細かなデザインの違いは出ていますが、そこは完全再現にこだわらず、モダナイズの一環としてある程度受け入れるつもりです。
引き続き、独自CSSや記法をどれだけ減らせるかも見ていきたいと思います。
好きだったものが終わるのは残念だけれど、好きだった理念まで諦めるつもりはありません。
PicoCSSの保守終了をきっかけに、ものづくりで大切にしたいことを改めて考えることができました。
コメント