oat

さよならPicoCSS。次のクラスレスCSSフレームワークを探す 愛用していたPicoCSSのメンテナンスが終了しました。 公式案内によると、v2.1.1が最後のリリースになります。 筆者は複数のプロジェクトでPicoCSSを使ってきました。 v1からv2への更新では見た目だけでなくカラーパレットやカスタマイズ方法も進化していたので、次のv3にも期待していたところでした。 好きだったのは、HTMLを素直に書けること PicoCSSを選んでいた理由は、セマンティックHTMLをほぼそのまま書けることです。 見出し、ボタン、フォームを標準要素で組むだけで最低限の見た目が整う。 必要な箇所だけクラスや独自CSSを足せばよく、HTMLの構造をスタイリングの都合で大きく変えずに済みます。 Tailwind CSSのようなユーティリティファーストにも利点があるのは分かるけれど、筆者はHTMLにスタイル指定のクラスを並べる書き方があまり好きではありません。 PicoCSSの魅力については、Zennの「デザインがときめくPico CSSの魔法」も参考になりました。 代替候補をどう見たか 条件は、標準HTMLを活かせること、フォームや小規模Webアプリで使えること、そして軽くカスタマイズしやすいこと。 Simple.css / MVP.css：手軽だけれど、筆者の用途ではもう少しUI部品が欲しい。 Blades CSS：PicoCSSのフォークで、互換性を重視するなら素直な候補。既存のSassによる調整まで引き継げるかは別途確認が必要。 Beer CSS：Material DesignとHTMLの組み合わせ方は好み。ただ、以前使ったときは独自のお作法を調整する場面が多かった。 Blades CSSで置き換えるのが手堅い選択肢ではあるものの、せっかくなら次に長く使いたいものを探してみたい。 Oat UIが気になっている そこで見つけたのがOat UIです。 2026年10月にv1.0.0になったばかりで、GitHubでは5,000以上のスターが付いています。 ドキュメントを読む限り、セマンティックHTMLを重視し、標準の要素や属性を活用する方向性がPicoCSSに近い。 フォームなどの基本スタイルに加えて、Webアプリで欲しくなる動的な部品も用意されています。 もちろん全部が素のHTMLで完結するわけではなく、一部は独自属性やWeb Componentsを使います。 このあたりは、実際に触って負担を見極めたいところです。 筆者としては、<details>、<dialog>、Popover APIなどの標準機能で済む領域が広がるなら、フレームワーク側もそちらへ寄っていってほしいと思っています。 移行作業は意外と素直 実際にPicoCSSからOat UIへの移行を少し進めています。 PicoCSSもOat UIも標準HTMLを活かせるため、今のところHTMLを大きく書き換えず、比較的素直に作業できている感触です。 まだリリース前ですが、多少のデザインの違いは完全再現を目指さず、モダナイズとして許容するつもりです。 独自CSSや独自記法がどの程度変わるかは、引き続き確認していきます。 PicoCSSを好きだった理由は、フレームワークが変わっても大事にしたいところです。 本家記事では、自作も考えた経緯やPicoCSSへの思い入れをもう少し詳しく書いています。 happas.jp