CSSの進化をふりかえる：floatの時代からユーティリティファーストの現在まで

はじめに

Web業界に携わるようになってから数年が経ちました。CSSの書き方やスタイリング手法を思い返してみると、私が業界に入った2020年と比べると、高々5年ですが大きく変化してきたことを日々実感しています。当時は既存のプロジェクトに floatとclearfix を使った実装が残っていたこともありました。

その後 display: flex の普及が進み、やがては grid の登場によって、CSSの世界は大きく変わっていきました。本記事では、CSSの歴史を少しだけふりかえりながら、現在主流となっているユーティリティファーストなCSS（特にTailwind CSSやshadcn/uiなど）についても触れてみたいと思います。

float と clearfix の時代

Web制作の初期には、レイアウトを組むための唯一の方法として float を使っていました。2カラムや3カラムのレイアウトを作る際には、要素を左右に浮かせ、親要素に clearfix を指定することで崩れを防ぐ、というスタイルが一般的でした。

ただし、この方法はメンテナンスが難しく、細かい調整やレスポンシブ対応も一苦労だった記憶があります。特に、要素の高さが揃わなかったり、思わぬところでレイアウトが崩れたりするのは、float特有の罠でした。

flexbox と grid の登場

display: flex の登場はまさに革命的でした。要素を簡単に中央揃えにできたり、カラム幅の調整も直感的に書けるようになり、CSSの複雑さが一気に軽減されました。

さらに display: grid によって、より高度なレイアウトが柔軟に、しかもシンプルな記述で実現可能になりました。これにより、float を使ったレイアウトはほとんど見かけなくなり、CSSは「やっと使いやすくなった」と感じた時期でもあります。

CSS Modules / styled-components / emotion

Reactの普及とともに、CSSの管理方法もコンポーネント単位で行う方法が主流になりました。

・CSS Modules は、クラス名の衝突を防ぎつつ、従来のCSSの書き方ができる点で好まれました。

・styled-components や emotion のような CSS-in-JS ライブラリは、JavaScriptの中にスタイルを記述できる点で、特にReactと相性が良く、柔軟性の高さが魅力でした。

ただ、動的にCSSが生成されるためにパフォーマンスやランタイムコストが気になる場面もあり、万能ではないという側面もありました。

ユーティリティファースト：Tailwind CSS の台頭

Tailwind CSS は、あらかじめ用意されたユーティリティクラスを組み合わせてスタイリングする手法です。最初は「クラス名が多すぎて読みにくい」「HTMLにスタイルが埋もれてしまう」と感じることもありましたが、慣れてくると一貫性のある設計がしやすく、生産性の高さに魅力を感じるようになりました。

Bootstrapと比較されることもありますが、Tailwindは必要なクラスだけをビルド時に生成するため、最終的なファイルサイズが非常に軽量になるのも大きな利点です。

shadcn/ui のようなコンポーネントライブラリ

最近注目しているのが shadcn/ui です。これはTailwind CSSベースのコンポーネントライブラリで、CLIコマンドで必要なUI部品（ButtonやPopoverなど）を自分のプロジェクトの components/ui ディレクトリにコピーして使う仕組みになっています。

この方式の良いところは、生成されたコンポーネントが普通のReactコンポーネントとして扱えるだけでなく、className を直接変更できるため、スタイルの微調整が非常にしやすい点です。

MUIやBootstrapなどのようにライブラリがスタイルを強く規定するのではなく、自分のTailwind設計に合わせて自由にカスタマイズできるのが魅力です。また、生成されたコードは自分のリポジトリに含まれるので、バージョン管理もGitベースで安心して行えます。

おわりに

CSSの歴史をふりかえると、時代ごとに「書きやすさ」と「保守性」を求めて様々なアプローチが登場してきました。現在ではTailwindやshadcn/uiのように、ユーティリティクラスとコンポーネントを組み合わせるスタイルが主流になりつつあります。

これから先も、より柔軟で生産性の高いCSS設計手法が登場してくると思いますが、過去の手法を知っていると、今のやり方のありがたみをより強く実感できますね。