CSS Zen Gardenの夢がついに実現

2026年8月14日 CSS Zen Gardenの夢がついに実現 モダンでネイティブなCSSをプリプロセッサなしで使用してFirefox.comを再構築し、今日のデザインシステムにそれが何を意味するかについて。 2008年、大学を卒業したばかりの頃、私はDave Shea氏のプロジェクトであるCSS Zen Gardenに出会いました。これは、単一のHTMLファイルがCSSだけで全く異なるものに再スタイル設定できるというものでした。それは、クリーンで再利用可能なデザインがコンテンツから完全に分離されているという夢の片鱗でした。しかし、実際のクライアントワークを ship（納品）しようとすると、その夢は崩壊しました。CSS変数はありませんでした。利用可能なプロパティでは完全な忠実度のデザインを表現できなかったため、サーバーサイド処理、画像、テーブルベースのレイアウト、そして無限のハックに頼ることになりました。ブラウザごとにレンダリングが異なったため、作業の多くは単に一つのデザインをすべてのブラウザで動作させることに費やされました。Zen Gardenは理論的に何が可能かを示しました。しかし、プロダクションは別の話でした。 そのギャップが埋まるのに20年近くかかり、そのほとんどはここ数年で起こりました。カスタムプロパティ（CSS変数）は、ブラウザが理解する変数を私たちに提供しました。GridとFlexboxは、メディアと戦うことのないレイアウトを提供しました。2008年には欠けていたプロパティが現在存在し、それらは十分に一貫して実装されているため、それらの周りを回るのではなく、それらを基準にデザインすることができます。 Firefox.com そのギャップはついに閉じられました。モダンCSSは、かつてプリプロセッサやハックを必要としていたことをネイティブに実行します。Firefox.comのリビルドでは、MozillaとLincoln Loopのチームと協力して、プリプロセッサなしで、モダンでネイティブなCSSでシステム全体を構築しました。カスタムプロパティはデザインファイルから直接エクスポートされ、ネイティブCSSはハックなしで一度だけ記述され、すべてのモダンブラウザで動作します。最小限のブランドスタイルシートがレガシーブラウザに基本的な、アクセシブルなブランディングを提供します。私たちは協力して、70以上のコンポーネントと25のページテンプレートからなるデザインシステムを構築しました。これはWagtailコンポーネントとして実装されているため、サイトのコンテンツチームはエンジニアリングの助けなしにページを組み立てることができます。このサイトは現在19のロケールをサポートしています。 正直な注釈が一つあります。最終的にプロダクションでPostCSSを使用しましたが、それは単一のジョブのためでした。それは@importステートメントのインライン化です。ネイティブの@importは依然として一部のブラウザでひどいパフォーマンス特性を持っており、このようなサイトではアーキテクチャの純粋さよりも重要です。記述されたCSSは依然としてプレーンなネイティブCSSです。その中の何も、有効であるため、または意味をなすためにビルドステップに依存していません。ビルドは、ブラウザがそうでなければシリアルにフェッチするものを平坦化するだけです。プロジェクトが「ビルドステップなし」と言われたときに、この区別を念頭に置く価値があります。重要なのは、あなたが書くソースがブラウザが話す言語なのか、それともコンパイルされるまで存在しない方言なのかということです。 なぜこれが私にとって重要だったのか CSS Zen Gardenの夢が、ついにプロダクションで実現しました。ウェブ標準のリーダーの一つであるMozillaとそれを実現できたことは、私にとって大きな意味がありました。Firefox.comはブラウザに関するサイトであり、それを構築するために使用されているプラットフォームのために20年間議論してきた組織によって作られています。プラットフォームが本当に準備ができているかどうかを知るのに、これ以上の場所を考えるのは難しいです。そして、それは準備ができています。私は、このクラフトについて私の考えを形作った人々、Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、Kasey Kelly（彼女が私をMozillaプロジェクトに繋いでくれました）、そして私の地元のヒーローであるEric Meyerに感謝しています。彼らの仕事は、私たちのような世代にCSSをシステムとして考えることを教えました。 このスレッド これは私のすべての仕事に流れるスレッドです。チームが迅速に動き、一貫性を保つことを可能にするデザインシステム。ビルディングブロックがピュアCSSであれ、Tailwindであれ、shadcn/uiであれ。ツールは数年ごとに変わります。変わらないのは、正しいことが簡単なことでもあり、デザイナーの決定が途中で3回翻訳されることなくプロダクションに到達するシステムです。もしあなたのチームがフロントエンドの基盤を再考しているのであれば、連絡してください。