Utility First, Component Second

• CSSでは、Tailwind CSSのようなユーティリティファースト手法（Utility-First）は、HTMLにクラスをずらずらとぶら下げるものだと考えられがち。

• しかしそれは表面的な見た目にすぎず、ユーティリティファーストの核心はコンポーネントを構成するタイミングの問題。

• CSS登場初期に流行した方法は、保守の悪夢を引き起こした。

• OOCSSの潮流は、コンポーネント構成によって問題を解決しようとした。再利用性は高まったが、コンポーネントのスコープ設定が難しいという問題にぶつかった。

• コンポーネントは再利用性のためのものだが、将来何が再利用されるかは分からないという問題。

• Atomic CSSの潮流は、1つのプロパティに1つのクラスだけを割り当てることで問題を解決しようとした。初期開発速度は上がったが、保守性の問題が再び現れた。

• 単一の真実の供給源（Single Source of Truth）があまりにも簡単に壊れる。全体検索と置換に依存することになり、外部テンプレートへの依存も煩雑で限界がある。

• ユーティリティファーストは、Atomicとは異なりコンポーネントを肯定する。また、OOCSSとは異なりユーティリティから始める。コンポーネントは実際に必要になったときに構成すればよい。

• 何をコンポーネントにするのか、という問いを、いつ作るのか、という問いへと転換する。

• つまり、ユーティリティファーストは両者を総合し、継承・発展させたものとして見るべき。

• したがって、ユーティリティファースト手法ではコンポーネントをもっと強調する必要がある。「私たちはコンポーネントを許容する」ではなく、「私たちはコンポーネントが本当に必要になる時点までそれを遅らせることで再利用性を最大化する」であるべき。

[nemorize]

よく読みました。

[mytory]

ありがとうございます :)