Atomic Design に対する感情
#デザイン #CSS
前提として、私は大規模に Atomic Design で構築されたコードベースを運用したことがない。
どちらかというと初めて見たときから一貫して食わず嫌いし続けているタイプである。
自分はそれなりに規模のある #フロントエンド を扱ってきたと思うし、
#デザインシステム の類も作ったことがある（今もやっている）のだが、なぜ Atomic Design に良さを感じないのかを思いつき次第まとめていく。
（余談だが自分の務めている会社はデザイナにも Atomic Design を好む人がいないのでこの辺で揉めたことがない。むしろ「やっぱ無理でしょ」「だよねー」ぐらいに意見があっていると思っている）
------
人間に /components より細かい分類は無理
実際世の中でよく批判されてる部分（ どこまでが atom? molecules? みたいなので揉める ）
開発者もできないし、デザイナもできない。おそらく誰も……
そもそも開発者向けの分類ではなく、デザイナ向けの分類である
作者がそう反論してたはず
ソース忘れた
JavaScript のコードを /atoms とかに分けるために作ったわけではなく、デザインデータの整理のためにつくったとか
しかし上で述べたとおり、私は結局デザイナにも優しくはないと思っている
「Atom」という単語を発明したことだけえらい
むしろ他の4つは名前を覚えなくていいと思う
「これは Atomic Design でいう Atom です」というフレーズだけ便利に使えばいい
Atom（原子）の語源が「これ以上分けられない」という意味の言葉なので気が利いてるな〜という気持ちになる
デザインシステムとの関連で語られるが、実は開発者の想像する「デザインシステム」より広い範囲を扱っている
ちょっと読めば分かると思うが、Atomic Design は page や template という階層を持っている
これはつまり、アプリケーション内に登場する具体的なコンポーネントを分類のスコープに含んでいるということ
一方で、デザインシステムは基本的に汎用性の高い UI コンポーネントを対象にすることが多い
Atomic Design は汎用的なデザインシステムについて語っているというより、デザインシステムを利用したアプリケーションの UI 構造を考えるためのものと言うべきではないか
「Atomic Design の考えをベースにデザインシステムを〜」みたいな文章見るけど、本当に template や page の範囲まで規定しとるんか？
「すべてがコンポーネントである」という誤謬を助長する
https://yuheiy.com/2022-06-11-css-components
プログラマが解釈した Atomic Design では、どんなに小さな #UI も #React Component の一種という解釈がされがち
デザインシステムは実際にはコンポーネントだけを対象にするわけではない
デザイントークンがある
ユーティリティファーストならユーティリティもある
あらゆる UI 要素を5階層のコンポーネントで表し、それですべてを実装するというアプローチが助長される
結果、無限にカスタマイズ可能な <Box> や <Text> を生み出すことになる
<Text as="span" fontSize={16}> みたいなことをするなら <span> 要素に Tailwind の text-base クラスをつけるほうがコンポーネントの #設計 として良いと思う
自前で生み出さなければ良いのか？という意見もあるだろうが、私は著名ライブラリを含めて（ Material UI、chakra-ui ... ）Box コンポーネントの類は全般的に筋が悪いと思っている