CSS Zen Gardenの夢がついに実現

CSS Zen Gardenの夢、ついに実現

Firefox.comをモダンなネイティブCSSで、プリプロセッサなしで再構築したこと、そしてそれが今日のデザインシステムに何を意味するか。

2008年、大学を卒業したばかりの私は、Dave Shea氏のプロジェクトであるCSS Zen Gardenに出会いました。このプロジェクトでは、一つのHTMLファイルがCSSだけで全く異なるものに再構築されていました。それは、コンテンツから完全に分離された、クリーンで再利用可能なデザインを作成するCSSの可能性を示唆するビジョンでした。

当時、CSSは今よりもはるかに成熟していませんでした。CSS変数はありませんでした。利用可能なプロパティでは完全な忠実度のデザインを表現できなかったため、サーバーサイド処理、画像、テーブルベースのレイアウト、そして無数のハックに頼っていました。ブラウザごとにレンダリングが異なっていたため、多くの作業は単に一つのデザインをすべてのブラウザで同じように動作させることでした。Zen Gardenは理論的に何が可能かを示しましたが、実際のプロダクションではまだ追いつくべきことがたくさんありました。

しかし、ここ数年でCSSはついに追いつきました。CSSはカスタムプロパティによる変数、そしてGridとFlexboxのおかげで、ハックを使ったりメディアと格闘したりすることなく、より簡単に複雑なレイアウトを実装できるようになりました。2008年にCSSに欠けていたプロパティは現在存在し、ブラウザ間で十分に一貫して実装されているため、ハックなしで完全な忠実度のデザインを構築するためにそれらに依存できます。

夢の実現

私たちのチームがFirefox.comの構築を開始したとき、目標の一つは、CSSが十分に成熟し、プリプロセッサなしで、純粋なCSSでモダンなデザインを完全に実装できることを証明することでした。そして、私たちはその目標を達成しました。私たちは協力して70以上のコンポーネントと25のページテンプレートからなるデザインシステムを構築しました。これはWagtailコンポーネントとして実装されており、サイトのコンテンツチームはエンジニアリングの助けなしに、あらゆるロケール向けのページを作成できます。すべてのスタイルは、特別な構文なしのネイティブCSSで純粋に記述されており[1]、デザイントークンはデザインファイルからカスタムプロパティに直接エクスポートされ、ハックなしでモダンブラウザ全体で完全にサポートされています[2]。

CSS Zen Gardenの夢は、同じマークアップで根本的に異なるデザインを実現することだったと主張する人もおり、Firefox.comが単一のデザインしか持たないことに繋がりが見いだせないかもしれません。CSS Zen Gardenは同じマークアップで異なるデザインを使用してビジョンを実証しましたが、そのビジョンは常に「CSSがどれほど素晴らしいかを示す」ことにありました。これはデザインとマークアップの厳密な分離によって可能になり、「さまざまなブラウザがCSSをどれほどうまく実装しているか」を示すものでした。そして、Firefox.comで行ったことは、テクノロジーとしてCSSがどれほど成熟し、ブラウザサポートがどれほど進んだかを示すことです。マークアップからデザインをクリーンに分離することで、純粋なCSSでどのブラウザでも動作する完全な忠実度のデザインを実装できるようになったことを証明しました。（そして、もし望むなら、CSS Zen GardenのようにFirefox.comを再スタイルするために独自のスタイルシートを書くこともできます。）

これを、Web標準のリーダーの一つであるMozillaの才能ある人々と共に証明できたことは、私にとって大きな意味がありました。プラットフォームが本当に準備ができているかどうかを知るのに、これ以上の場所は考えにくいです。そして、それは準備ができています。

感謝

このクラフトに対する私の考え方を形作った人々、Nicole Sullivan、Rachel Andrew、Jen Simmons、Chris Coyier、Kasey Kelly（彼が私をMozillaプロジェクトに繋いでくれました）、そして私の故郷のヒーローであるEric Meyerに感謝しています。彼らの仕事は、私たち世代全体にCSSをシステムとして考えることを教えてくれました。

募集中

私は2008年からデザインシステムをCSSで構築してきました。当時、不動産業者のネットワークのためにCSS 2.0とPHPを使用してデザインシステムを構築し、人々がビジネスのために新しいサイトを迅速に立ち上げられるように支援しました。そして、私はキャリアを通じて、チームが迅速に動き、一貫性を保つのを助けるさまざまなWebテクノロジーを使用してデザインシステムを構築してきました。ツールは常に変化しており、最近ではAIによってますます速く変化していますが、変わらないのはデザインシステムがどのように機能するかを理解することの価値と、どんなテクノロジーでもそれらを構築できる能力です。

もしあなたのチームが迅速に物事を構築しており、一貫性を保ちながら、より速くリリースし、優れたユーザーエクスペリエンスを提供したいと考えているなら、私はミッションドリブンで革新的なチームでフロントエンドの専門知識を求めている方々からの連絡をお待ちしています。もしそれがあなたなら、お気軽にご連絡ください。

更新日: 2026年9月16日

フットノート

1. ネイティブの@importはすべてのモダンブラウザで動作しますが、依然として深刻なパフォーマンスの問題があります。最終的に、プロダクションではPostCSSを使用して@importステートメントをインライン化しました。しかし、記述されたCSSは依然としてプレーンなネイティブCSSです。ビルドステップに依存して有効になったり、意味をなしたりするものは何もありません。ビルドは、ブラウザがそうでなければシリアルにフェッチするものを平坦化するだけです。↩
2. このブラウザサポートマトリックスの「Enhanced support」の下にリストされているすべてのモダンブラウザは、ハックなしでサポートされています。「Degraded support」の下にリストされているレガシーブラウザは、基本的なアクセシブルなブランドスタイルシートを使用してサポートされています。↩