ついに実現したCSS Zen Gardenの夢：Webデザインの理想を追い求めて

かつてWeb開発者を熱狂させた「CSS Zen Garden」のコンセプトが、ついに現代の技術で実用化されました。構造（HTML）とプレゼンテーション（CSS）を完全に分離し、マークアップを変更することなく、純粋なCSSの力だけでサイトの見た目を劇的に変えるというあの夢。最新のWeb標準技術を活用し、ついに本番環境でリリースに至りました。

このサイトは今も健在だよ https://www.csszengarden.com (https://www.csszengarden.com) 。デザインの選択画面はここ https://www.csszengarden.com/pages/alldesigns/ (https://www.csszengarden.com/pages/alldesigns/) :)。

いいんだけどさ、Zen Gardenみたいに、同じコンテンツに対して2つ以上の全く異なるデザインを用意しているWebサイトって、今本当に存在するの？

そのデザインシステムってどこかでオープンソース公開されてる？

今のfirefox.comは信じられないくらいシンプルだよな。タブレットやスマホ中心の設計だし（デスクトップだと全部がやたらと大きく見える）。

CSS Zen Gardenが成功したのは、全員が単一のマークアップファイルを使っていたからだよ。現実世界では、あれはあまりうまく機能しない。

「関心の分離」を宗教的な原則のように考えるんじゃなくて、HTMLにおいてそれが実際にどんなメリットをもたらすかを考えてみてほしい。

マークアップとスタイルが完全に分離されているということは、CSSルールをDOMにマッピングする何らかの手段が必要になるってことだ。それには特定の要素が特定の構成で配置されている必要がある。マークアップのどこかが少しでもズレていれば、プロパティが意図した通りに適用されない可能性がある。同様に、CSSがDOM構造を考慮していなければ、ルールを修正したり追加したりしなきゃならない。

このマッピング手法は、言わば暗黙的な構造だ。ソースコードとは別に、「余分な」何かが要求される。ブラウザは計算できるけど、コードを見ている開発者にとっては明示的じゃないから理解しづらいんだ。

それに対してTailwindやTachyonsなどは、ほぼ全ての構造が明示的で、複雑さが低く、何がどこにあるか一目瞭然だ。

隠れた構造は開発者から見れば綺麗に見えるし、コードも「洗練されている」ように見えるかもしれない。だけど、コードベースの暗黙的な構造を理解するのは一時的なものだし、後々返済が必要な技術的負債が確実に溜まっていく。

Tailwindは見た目は不格好かもしれないけど、使いやすいルールと最小限の設定ファイル以外に、コードの中に隠れた抽象化や構造が存在しない。

もちろん、高レベルな抽象化をしたCSSをうまく運用する方法はあるよ。例えば、特定のDOMパターンを持つコンポーネントライブラリを使うとかね。でもそこまでやるなら、わざわざ複雑さを増やすより、Tailwindみたいにスタイルをコンポーネントに直接組み込んでしまった方が良くない？

@importに関するパフォーマンス問題を解決するためにポストプロセッサを使い続けているの？インポートをインライン化したらどうやってそれが解決するんだ？ページを読み込んだとき、フォントがチラついたよ。

もしかしてこの記事はフォントのインポートの話じゃないのかな。フォントならHTMLヘッダーに書くか、システムフォントに留めておくのが一番だと思うけど。

CSS Zen Gardenの夢とは全く関係ないと思うよ。CSS Zen Gardenは「同じマークアップに全く異なるスタイルを適用する」ことに関するものだった。これは、Custom PropertiesやFlex、Gridといった最近のCSS機能を使って、ごく一般的なWebサイトの単一のスタイルシートをメンテナンスしやすくする、という話でしょ。

すごく良い取り組みだけど、HNの多くの人はCSS Zen Gardenや当時のCSS時代をあまり良く思っていない気がする。彼らはマークアップとスタイルシートの分離なんてひどいアイデアで、それを修正するためにTailwindが存在していると考えているんだ（自分は彼らが間違っていると思う。分離は良いことだし、Tailwindはハックに過ぎない。俺の庭から出ていけって気分だね）。

ポイントは、今のモダンなバニラWebプラットフォームなら、デザインシステムからプロダクションレベルの「CSSでスタイルされたアプリコンポーネント」を本当にサポートできるようになったってことだ。これは本当にすごいことだよ！

HTMLとCSSは元々、デジタル文書を表示するための「文書指向言語」として設計された。MS WordやPDFにハイパーリンクをつけたようなもので、アプリのSDKじゃない。考え方は単純で「Webサイトのタイトル、見出し、段落、フッターなどのスタイルを1箇所で管理して、そこを変えればサイト全体が更新される」というものだった。それがCSS Zen Gardenが示そうとした夢だ。インタラクティブ性やWebアプリは「後から」やってきたもので、CSSが追いつくのに随分と時間がかかったんだ。

でも、ようやく追いついた。フロントエンド開発がTailwindやReactを脱却して、最新のバニラWebプラットフォームを活用するようになれば嬉しいよ。Lit[0]みたいな超軽量なWebコンポーネントライブラリを使うなら文句はないね。

[0] https://lit.dev (https://lit.dev)

AndroidのChromeでメニューを開いて一番下までスクロールすると、「Newsletter」のメニュー項目が途切れて見えなくなるよ（Firefox Androidでは見えるから存在するのは分かってるんだけど）。

誠実な脚注が一つある。

鳥肌が立つよ。AIエージェントがこういう書き方をするの、いつやめるんだろうな。