9月15日、Jo Sprague氏が「The CSS Zen Garden dream, finally shipped」と題した記事を公開した。この記事では、プリプロセッサなしのネイティブCSSだけでFirefox.comを刷新したプロジェクトの詳細について詳しく紹介されている。以下に、その内容を紹介する。
伝説のCSS Zen Gardenが示した「夢」
2003年にDave Sheaが公開したCSS Zen Gardenは、1つのHTMLファイルをCSSだけで全く異なる見た目に変えられることを示した伝説的なプロジェクトだ。「コンテンツとデザインを完全に分離する」という理想を体現しており、当時のフロントエンドエンジニアに衝撃を与えた。
しかし当時、その「夢」を実際の制作物に落とし込もうとすると壁にぶつかった。CSS変数は存在せず、レイアウトはtable要素やハックの組み合わせに頼るしかなく、ブラウザ間の挙動の差異への対応だけで膨大な工数が消えた。Sprague氏は2008年に大学を卒業してCSS Zen Gardenと出会い、その「夢」と「現実の制作」のギャップを身をもって体験した一人だ。
そのギャップが埋まるまでに約20年かかった。Custom Properties（CSS変数）、Grid、Flexboxといった仕様が整い、ブラウザ実装も十分に安定した今、ようやくその夢が制作現場で成立する。
プリプロセッサなしでFirefox.comを構築
Sprague氏はMozillaおよびLincoln Loopのチームと協力し、Firefox.comの全面刷新をネイティブCSSのみで実施した。SassやLessといったプリプロセッサは一切使わず、デザインファイルからCustom Propertiesを直接エクスポートし、それをそのままブラウザが解釈できるCSSとして記述する構成だ。
成果物の規模は以下のとおりだ：
- 70以上のコンポーネントと25のページテンプレートからなるデザインシステム
- Wagtail（DjangoベースのCMS）のコンポーネントとして実装し、コンテンツチームがエンジニア不要でページを組み立てられる構造
- 19ロケール（言語・地域）をサポート
- レガシーブラウザ向けには最小限のブランドスタイルシートを提供し、基本的なアクセシビリティを確保
一点、正直な補足がある。本番環境ではPostCSSを1つの用途だけに使用している。@import文のインライン展開だ。ネイティブの@importは一部ブラウザでシリアルフェッチが発生しパフォーマンスに悪影響を与えるため、ビルドステップで平坦化している。ただし、書かれているCSSそのものはプレーンなネイティブCSSであり、ビルドがなければ無効になるような独自構文は一切含まないという点が重要だとSprague氏は強調する。
「"ビルドステップなし"と言われたとき本当に確認すべきは、書いたソースがブラウザが話す言語かどうか、それともコンパイルされて初めて存在する方言かどうかだ。」
「プラットフォームは本当に準備できているか」への答え
Sprague氏がこのプロジェクトに特別な意味を感じた理由の一つは、クライアントがMozillaだったことだ。Mozillaは20年間ウェブ標準の推進を主導してきた組織であり、Firefox.comはまさにそのブラウザについてのサイトだ。「ネイティブCSSだけで本番に耐えうるシステムが作れるか」を試すのに、これ以上ふさわしい場所はない、とSprague氏は述べている。
その答えは明確だ。「できる」。
変わらない本質、変わるツール
Sprague氏はこのプロジェクトを通じて、自身の仕事を貫くテーマを改めて言語化している。ツールはSass、Tailwind、shadcn/uiと数年ごとに変わる。しかし「正しいことがそのまま簡単なことでもあり、デザイナーの決定が3回翻訳されることなく本番に届くシステム」の価値は変わらない、と。
デザインシステムやCSS設計に関心を持つエンジニアにとって、「プリプロセッサなしでここまでできる」という具体的な実績として参照価値のある事例だ。
詳細はThe CSS Zen Garden dream, finally shippedを参照していただきたい。
