CSS Zen Gardenの夢が、Firefox.comでついに実現

CSS Zen Gardenが機能したのは、誰もが単一のマークアップファイルを使っていたからだ。現実世界では、実際にはうまくいかない。

関心の分離を宗教的な原理と考えるのではなく、HTMLの場合に実際にどのような利益をもたらすかを考えよう。

マークアップがスタイリングから完全に分離されている場合、CSSルールをDOMにマッピングする方法が必要になる。これには特定の要素が特定の方法で組織化されている必要がある。マークアップのどこかがおかしいと、プロパティが意図した通りに適用されないかもしれない。同様に、CSSがDOM構造を考慮していない場合、ルールを修正したり新しいルールを追加したりする必要がある。

このマッピングの方法は暗黙の構造だ。それは、そこにあるソースコードを超えて必要とされる何か余分なものだ。ブラウザによって計算できるが、コードを見る開発者にとって明示的に述べられているわけではない。

これとTailwind、Tachyonsなどを比較すると、ほぼすべての構造が明示的で、複雑さが少なく、発見可能で、オープンになっている。

隠れた構造は開発者にとっては見栄えが良い。コードは「きれいに見える」。しかし、コードベースの暗黙の構造を理解することは儚く、後で返済する必要がある固有の技術的負債がある。

Tailwindは醜く見えるが、その簡単な慣習と最小限の設定ファイルを超えて、コードに隠れた抽象化や構造はない。

そして、はい、高抽象度のCSSを機能させる方法はある。たとえば、既知のDOMパターンのコンポーネントライブラリを使うなど。しかしその時点で、なぜスタイルを構築しないのか […]

エージェント型ソフトウェア開発の時代のCSS Zen Garden… 私は、サイト全体がテーブルで開発されようと、CSSで開発されようと、Rustベースのエンジンでwasm配置要素を出力しようと、誰も気にしなくなっている段階に来ていると思う。

ただビューをくれ、そして私は物事を操作する。私たちはまもなく「LCARS」の瞬間を迎えるだろう。誰も本当にUIを作成する必要がなくなる時だ。システムが使用時に、あなたが見ているものとやっていることに基づいて、あなたのためにUIを作成する。私たちはもはやUI/UXを必要としなくなり、すべてが使う人に適応するだろう。

これは本当に素晴らしい仕事だが、HNの多くの人々はCSS Zen Gardenやその時代のCSSを快く思っていないと思う。彼らはマークアップ/スタイルシートの関心の分離はひどいアイデアであり、Tailwindがそれを修正するために存在すると思っている。（私は彼らが間違っていると思う。関心の分離は良いことで、Tailwindはハックであり、ついでに言えば私の芝生から出て行け。）

要点は、今やモダンなバニラウェブプラットフォームが、デザインシステムからのファーストクラスのCSSスタイル付きアプリコンポーネントを本番環境で本当にサポートできるということだ。これは本当にクールだ！

HTMLとCSSはもともとデジタル文書表示のための文書指向言語として設計された。MS WordやPDFと文書間ハイパーリンクを考えてみてほしい。アプリSDKではない。アイデアは単純に「ウェブサイトのタイトル、見出し、段落、フッターなどを一箇所でスタイルし、そこで変更すればサイト全体が更新される」というものだった。それがCSS Zen Gardenが示そうとした夢だ。インタラクティブ性とウェブアプリは後から来て、CSSが追いつくのに非常に長い時間がかかった。

しかし追いついた。フロントエンドウェブ開発がTailwindとReactを捨てて、更新されたバニラウェブプラットフォームを選ぶようになれば嬉しい。そしてLit[0]のような超軽量ウェブコンポーネントライブラリを使っても文句は言わない。

[0] https://lit.dev

CSS Zen Gardenの夢とは何の関係も見当たらない。CSS Zen Gardenは同じマークアップに根本的に異なるスタイルを適用することだった。これは、Custom Properties、Flex、Gridのような新しいCSS機能が、単一のごく普通のウェブサイトのための単一のスタイルシートのメンテナンスを可能にするという話だ。