こんなAI時代に、新しいCSS設計フレームワークを作る理由
最近は なんでもかんでも、ぜーーーーんぶ、 Tailwind CSS。
なぜならAIが吐き出すのがTailwindだから。AIにCSSなんて書かせたら余計カオスになるから。
そんな、Tailwind CSSが圧倒的一強となった世の中で、自分は今「Lism CSS」 という CSS設計フレームワークを開発しています。
しかし「こんなAI時代に今さら新しいCSS設計理論？フレームワーク？バカじゃねーの」という声が聞こえてきます。「WEBサイトなんてAIが一瞬で作れるしCSSなんて書く必要も覚える必要もなくなるのに」と。
ぐぬぬ...たしかに。
とは自分でも少し思ってしまうものの、はたして本当にバカげていることなのでしょうか...。
私は、違うのではないかと思っています。
放っておけばAIによる無秩序なコードが無限生成されていく今だからこそ、新しいCSS設計理論の構築に挑戦する価値がある、と思っています。
AIはCSSがかなり苦手、という現実
コーディングは基本的にもうAIに任せればいい。それは異論ありません。自分でも手書きでコードを書くことは少なくなりました。ちょっとしたプロジェクトであれば、吐き出すコードもよく見ないような状態です。
多くの人が、自分で書かない、AIが書いたコードもよく見ない、そんな状態になってきています。
でも、みんなどこかで、「ある程度コードの質は保ちたいなあ。」という気持ちは抱えているのではないでしょうか。
CSSに対してもそれは同じ。
できるなら、AIが勝手にいい感じに秩序のある設計に則って肥大化させずにCSSを書いておいてほしい。
でも現状、残念ながら AIはCSSがかなり苦手です。
例えば、AIにページを生成させると、こんなことが平気で起こります。
- 同じ見た目のコンポーネントなのに、ページごとに違うクラス名でほぼ同じスタイルが複製されてしまう。
- 指示した見た目にはなっているが、無駄に冗長な書き方をしてしまう。
- レスポンシブ対応が場当たり的な
@mediaまみれになる。 - スタイリングに一貫性がなくなぜその値を使っているかの根拠がない。
- 追加作業させる度に、CSSコードが肥大化していく。
人類が扱いきれなかったCSS。多種多様でカオスなCSSがインターネットには大量に漂っています。そして、AIはそれらを元に学習をしています。
つまりAIもまだCSSを扱いきれていません。教材がカオスなんだもの。
そして今、人類が手書きしていた時代のCSSの問題が、AIによってさらにスケールしてしまっているというわけです。
そしてこのまま人類がCSSについて考えることを放棄してしまうと、AIはCSSに関してずっとバカなままです。悪化していくかもしれません。
じゃあ、どうすればいい？
まずは自衛。自分のプロジェクトだけでもしっかりしたコードを書かせるようにしたいですね。ある程度指示を追加すれば、極端な問題は抑えることはできるでしょう。
しかし、もう少しちゃんとしたものを出力させるためには、AIにCSS設計ルールをガチガチに固めてちゃんと伝える必要があります。ふわっとした指示で適切な設計を構築することはまだAIにはできませんからね。
「AIにCSS設計ルールをガチガチに固めてちゃんと伝える」...？
それができたら私たちはここまで苦労してきていません。
現状、諦めるしかないのか...。
そういうニーズが、徐々にでてくる（潜在的にすでにある）のではなかろうか？
デファクトスタンダードな「設計理論」がAIには必要
「書き方」としてのデファクトスタンダードは、今の所圧倒的にTailwind CSSです。
Tailwind CSSの核は「CSSの書く場所を変える」というソリューションです。これにより、CSSの煩雑さによる運用上の問題の多くが軽減されました。これは本当に素晴らしいアプローチです。
ただ、Tailwind自体は高度なCSS設計理論を提供するものではありません。Tailwindが「CSSをどこに書くか」の問題を解決したとすれば、「CSSをどう設計するか」はまた別の問題です。
ちょっと複雑なCSSを当てようとすれば、HTMLがどんどんカオスになっていきますし、CSSを一部だけ普通に書こうとすると、そこから先はTailwindとは無関係な領域になります。「こういうスタイルはこういう命名規則で、このレイヤーの中で書こうね」みたいなガイドはありません。
また、素のHTMLサイトには、ビルドが必要なTailwindは導入しづらいですが、AIが全部書き換えてくれるこの時代、もはや素のHTML+CSSでも十分なケースも増えてくるでしょう。
そういうプロジェクトでは、どういう規則に則ってCSSを書かせればよいでしょうか？
「とりあえず迷ったらこれを採用しておけばいい」という設計理論が、世の中にはまだありません。
「どんなサイトにも導入できるような汎用性を持ちながらも、人でもAIでも秩序を保つことのできるCSS設計理論」が、きっと必要です。
それは一体どのようなものだろうか...。
今のうちに人類が考えてAIに学習させておく必要があると思っています。
面倒でお金にもならないことは、誰もやりたくない
SNS上では毎日、多くの人がAIに驚嘆し、LLMの活用術を共有し、いかに簡単に稼げるかを自慢し合っています。
彼らは毎日、このチャンスを逃すまいとインプレッションを得ることに必死です。
今さら、CSS設計について真面目に考えようとする人はほとんどいないでしょう。
そんなの考えてもお金になりません。
AIのせいでTailwindの収益が低下し、開発チームの多くが解雇されたというニュースが一時期世間を騒がせました。優れたフレームワークを作ったところで、AIが使ってくれるようになるほど、むしろ収益は下がるのです。
時間をかけて一生懸命作り込んだところで、その良さを伝えるのもかなり大変。
CSSは何を良しとするかが人それぞれで、これと言った正解なんてありません。宗教みたいなものです。中途半端に新しいものは「なんか気持ち悪い」と拒否されて終わります。
だからこそ、CSSの宗教的な要素を全てぶち壊したTailwind CSSのアプローチ（クラス名を考えたりどこに書くべきか考えたりしなくてよい潔さ）が広く受け入れられた側面もあるでしょうし。
CSSにはそういう難しさがありますよね…。
じゃあ誰がやるの
本当に今さらこんなの時間かけて考えるメリットなんて、ほぼないんですよね…。
でも誰かがやらないといけません…（と、自分はそう思っています。）
なので、やっています。
「AIでどれだけ楽に稼げるようになるか」で周りが必死になっているなか、地味だけど価値がある（と自分が信じられる）ものについて、思考をめぐらせ開発し続けていきたいと思います。
最低限の妥協ラインとなるCSS設計のデファクトスタンダード。「AIも人もこれさえ守っていればとりあえず安心」というものを（一つの案として）世の中に提示していきたいなと。
そんな自分が今開発している「Lism CSS」 という CSS設計フレームワーク。
もし興味がありましたら、ちらっとでもいいので覗いてみてください。
もしくは、GitHubでスターをポチっと押してくださると、それだけでも非常に励みになります…。もしよければお願い致します。
Every Layout のレイアウトプリミティブな思考を採用しつつ、Tailwind CSSのような単一プロパティ用のユーティリティクラスも用意されています。
また、デザイントークンやLayer階層の定義、タイポグラフィのスケーリング設計などもされており、ただのユーティリティクラスの寄せ集めパッケージではなくサイト全体のCSS設計を丸ごと引き受けるフレームワークになっています。
正直に言って、学習コストはかなり高めで、全体的に尖ったフレームワークです。
ですが、AIの理解を手助けできるようなエコシステムも今後整えていこうと思っています。
↓
Skills も準備できました。
以下の skills.sh のコマンドでインストールできます。
npx skills add lism-css/lism-css
.
実はこのLism CSS、着手してからすでに 3 年以上経過してしまっています。途中で開発が頓挫してしまって一度諦めかけたり、なんども路線変更したりと、すでにかなり紆余曲折のあるプロジェクトですが、ようやく形になってきました。
ここからが勝負です。もう少し、がんばります。
Discussion