Utility-First について調べてみた

Utility-First とは

クラス名を自分で考えてそれに CSS をつけるのではなく、あらかじめ用意されたクラスを使うこと。

早速比較してみます。

通常の CSS

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Utility-First で記載

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
  </div>
</div>

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

通常の CSS と比べるとなんかすっごいすっきりしていますね！

ただ CSS しか知らない人にとっては書いてあることはちょっと癖があります。

何がうれしいのか？

書き方は CSS 直書き(inline styles)に近くなります。

ただ、CSS のルールで決めた上でコンポーネントを共通管理しているのでデザインの一貫性はある程度保てるようにできます。

React で よく使われる Utility-First ライブラリ

有名なのは以下の通りです。

名称	汎用性	効率性	Git hub スター数	所感
Tailwind CSS	◎	△	54.7k	Utility-First といえばこれらしい。よく Zenn の記事で使われている印象
Chakra UI	△	○	24.7k	コンポーネントを提供するタイプ、使うのが楽
MUI	○	◎	73.4K	コンポーネントを提供するタイプ、React の定番

Utility-First な CSS,UI フレームワークを比較してみた(Tailwind CSS, Chakra UI, MUI)

まぁ MUI って入ってるからなんだろうと思った程度なんですが、MUI は僕の中ではデザインコンポーネントライブラリなので、Utility-First で使えるんだね！

程度です。

経験上確かに Utility-First 機能は Box コンポーネントとかの設定の際に使うことがあります。

Vue でよく使われる Utility-First ライブラリ

少し調べた(Google った)のですが Tailwind CSS しか基本このキーワードでは引っかかりませんでした。

React より Vue は Utility-First な書き方しないんですかね？

やっぱり vue ってデフォルトで綺麗に分かれてるし、、、

Bootstrap と The Utility-First Tailwind CSS の比較

僕が大好きなというか世界のみんなが大好きな Bootstrap と比較してみたいと思います。

Bootstrap

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">column 1</div>
    <div class="col-6 col-md-4">column 2</div>
    <div class="col-6 col-md-4">column 3</div>
  </div>
</div>

Tailwind CSS

<div class="container mx-auto px-4">
  <div class="flex flex-wrap">
    <div class="w-6/12 md:w-4/12">column 1</div>
    <div class="w-6/12 md:w-4/12">column 2</div>
    <div class="w-6/12 md:w-4/12">column 3</div>
  </div>
</div>

違いはどこですか！？

Bootstrap では複数のプロパティを含むクラス（.container, .row）がありますが、Tailwind CSS では各クラスは 1 つのプロパティにのみ対応しています。

CSS を書くのが劇的に楽になる！ユーティリティファーストの CSS フレームワーク「Tailwind CSS」 | コリス

ふ～ん

おそらく凄い細かくデザインするプロジェクト向けなんだろうなとだけ思いました。

感想

Vue でも React でも Utility-First ライブラリを使った場合 CSS は要するにグローバルの 1 つだけなのでなぞのスコープ汚染みたいな事象が発生しなくなります。

実は、CSS のスコープ汚染で苦しめられた苦い経験がある僕には結構メリットだったりします。

プロジェクトに明確な CSS ルールがないなら Utility-First ライブラリを使用して開発するのは 1 つの答えだと思います。