【イベントレポート】CSS設計完全ガイド × Tailwind CSS実践入門著者に聞く！負債にならないCSSの書き方とは

2025-02-19

約3776字

Yard 編集部

フォロー

セッション1: CSSによる“スタイリング”コントロールの苦悩と変遷（半田惇志）氏

セッション2: 負債になりにくいCSSをデザイナとつくるには？～Tailwind CSS実践の視点（ f_subal氏）

ディスカッション: CSS負債の正体と解決策

Q1. CSSが負債化して困った経験は？

Q2. どうやってCSSフレームワークを選べばいい？

Q3. ユーティリティファーストだとHTMLが読みにくい…？

まとめ

Insight

2025年2月12日、エンジニア向けサービス「Offers」が主催するオンラインイベント「CSS設計完全ガイド／Tailwind-CSS実践入門著者に聞く負債にならないCSSの書き方とは」が開催されました。

一見シンプルなようで奥が深いCSS。

時として、メンテナンス性が低下し“負債”になってしまうケースも珍しくありません。

本イベントでは、CSSにまつわる負債の原因や、代表的なフレームワークであるTailwind CSSが本当に負債を生みやすいのかどうかを掘り下げる機会となりました。

登壇者として、「CSS設計完全ガイド」の著者である半田惇志（@assialiholic）氏と、「Tailwind CSS実践入門」の著者である工藤智祥（@f_subal）氏を迎え、それぞれの立場から「CSS負債の本質」と「負債を回避するアプローチ」を紹介。

多くの参加者にとって「CSSをどのように捉え、どう使うべきか」を再考する充実のイベントとなりました。

セッション1: CSSによる“スタイリング”コントロールの苦悩と変遷（半田惇志）氏

1人目の登壇者は、『CSS設計完全ガイド』の著者として知られるフリーランスエンジニアの半田氏。「CSSが当たり前に使われるようになるまでの歴史」から振り返り、時代ごとに起こったパラダイムシフトを噛み砕いて解説しました。

HTML構造とスタイリングの分離：当初は<font>タグやbgcolor属性など、HTMLそのものにスタイルを埋め込む手法が主流だった。そこにCSSが登場し、HTMLは構造、CSSは見た目という分業が確立。これが第1のパラダイムシフトとなった。
CSS設計論とOOCSSの台頭：しかし、CSSファイル単位での管理はすぐに「衝突」「上書きの混乱」を招く。そこでモジュール化や命名規則を体系化する“OOCSS”が提唱され、大きなインパクトをもたらした（第2のパラダイムシフト）。BEMやSMACSSなどもこの流れを汲み、クラス命名・構造分割・再利用の仕方を確立していった。
コンポーネント化時代の到来：ReactやVueなどのフレームワークが普及したことで、JSレイヤー上に「コンポーネントスコープ」が生まれた。これによりクラス命名の衝突問題は大幅に解消。しかし「スタイリングの設計」は依然として人のノウハウや意識に委ねられているため、完全には解決していない。

結論として半田氏は「コンポーネント環境があっても、CSSが再利用しづらい・上書きが煩雑になるケースは残る。

CSS設計論の精髄は『コンポーネントに何を持たせ、何を持たせないか』を考える力だ」と強調しました。

続いての登壇者は、『Tailwind CSS実践入門』著者でありピクシブ社でデザインシステム開発を担うf_subal氏。

「ユーティリティファースト」アプローチとして知られるTailwind CSSがなぜ負債を防ぐフレームワークになりうるのかを、デザインシステムと絡めて解説しました。

なぜCSSが負債化するのか：CSSコーディング規約だけで状況を改善しようとしても、デザイナーとエンジニアの意図が噛み合っていなければ不整合が起きる。“ドメイン知識”としてのデザインを反映する仕組みが重要。
デザインシステムは「契約」である：カラーやスペースといったトークン、コンポーネント命名などの定義をエンジニア・デザイナーが共有し、逸脱を防ぐ。それが真にCSSの負債を減らす本質。
Tailwind CSSの強み: カスタマイズを前提とした“デザインシステム支援”：多くの人がテイルウンドCSSを“クラス名をHTMLに直接並べるだけのツール”と捉えがちだが、真価は「tailwind.config.js」を通じた徹底的なカスタマイズ機能にある。