ユーティリティファーストの基礎

概要

従来、ウェブ上で何かをスタイルする必要がある場合、CSS を記述します。

カスタムデザインにカスタム CSS が必要な従来のアプローチを使用

ChitChat

新しいメッセージがあります！

<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>

Tailwind を使用すると、HTML で既存のクラスを直接適用することで要素をスタイルできます。

CSS を記述せずにユーティリティクラスを使用してカスタムデザインを構築

ChitChat

新しいメッセージがあります！

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

上記の例では、

カード全体のレイアウトを制御するために、Tailwind の flexbox および padding ユーティリティ (flex、shrink-0、および p-6) を使用しました。
カードの幅を制限し、水平方向に中央揃えにするために、最大幅とマージンユーティリティ (max-w-sm および mx-auto) を使用しました。
カードの外観をスタイルするために、背景色、ボーダー半径、およびボックスシャドウユーティリティ (bg-white、rounded-xl、および shadow-lg) を使用しました。
ロゴ画像のサイズを設定するために、幅および高さユーティリティ (w-12 および h-12) を使用しました。
ロゴとテキストの間の間隔を処理するために、スペース間隔ユーティリティ (space-x-4) を使用しました。
カードテキストをスタイルするために、フォントサイズ、テキストカラー、およびフォントウェイトユーティリティ (text-xl、text-black、font-medium など) を使用しました。

このアプローチにより、カスタム CSS を 1 行も記述せずに、完全にカスタムのコンポーネントデザインを実装できます。

今、あなたは「これはひどい、なんてひどい混乱だ！」と思っているでしょう。その通りです。少し醜いです。実際、初めて見たときにこれが良いアイデアだと思うのはほぼ不可能です。実際に試してみる必要があります。

しかし、実際にこの方法で何かを構築すると、いくつかの非常に重要な利点にすぐに気付くでしょう。

クラス名を考案するのにエネルギーを無駄にすることはありません。何かをスタイルできるようにするために、sidebar-inner-wrapperのようなくだらないクラス名を追加したり、実際には単なるフレックスコンテナであるものの完璧な抽象名を考えたりするのに苦労する必要はありません。
CSS が肥大化しなくなります。従来のアプローチを使用すると、新しい機能を追加するたびに CSS ファイルが大きくなります。ユーティリティを使用すると、すべてが再利用可能になるため、新しい CSS を記述する必要はほとんどありません。
変更を加えるのが安全に感じられます。CSS はグローバルであり、変更を加えたときに何が壊れるかわかりません。HTML のクラスはローカルであるため、他のものが壊れることを心配せずに変更できます。

定義済みのユーティリティクラスを使用して HTML のみで作業することがどれほど生産的であるかを理解すると、他の方法で作業することは拷問のように感じられるでしょう。

なぜインラインスタイルを使用しないのですか？

このアプローチに対する一般的な反応は、「これは単なるインラインスタイルではないのか？」と疑問に思うことです。ある意味ではそうです。クラス名を割り当ててそのクラスをスタイルする代わりに、スタイルを要素に直接適用しているからです。

しかし、ユーティリティクラスを使用すると、インラインスタイルよりもいくつかの重要な利点があります。

制約のある設計。インラインスタイルを使用すると、すべての値が魔法の数字になります。ユーティリティを使用すると、定義済みのデザインシステムからスタイルを選択できるため、視覚的に一貫性のある UI を構築するのがはるかに簡単になります。
レスポンシブデザイン。インラインスタイルではメディアクエリを使用できませんが、Tailwind のレスポンシブユーティリティを使用すると、完全にレスポンシブなインターフェースを簡単に構築できます。
ホバー、フォーカス、その他の状態。インラインスタイルはホバーやフォーカスなどの状態をターゲットにできませんが、Tailwind の状態バリアントを使用すると、ユーティリティクラスを使用してこれらの状態を簡単にスタイルできます。

このコンポーネントは完全にレスポンシブで、ホバーおよびフォーカススタイル付きのボタンが含まれており、すべてユーティリティクラスで構築されています。

エリン・リンドフォード

プロダクトエンジニア

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-slate-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

保守に関する懸念

ユーティリティファーストのアプローチを使用する際の最大の保守性の懸念は、一般的に繰り返されるユーティリティの組み合わせを管理することです。

これは、コンポーネントとパーシャルを抽出し、マルチカーソル編集や単純なループなどのエディターと言語の機能を使用することで簡単に解決できます。

<!-- PrimaryButton.vue -->
<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot/>
  </button>
</template>

それ以外は、ユーティリティファーストの CSS プロジェクトの保守は、大規模な CSS コードベースの保守よりもはるかに簡単であることが判明しています。これは、HTML の方が CSS よりも保守がはるかに簡単であるためです。GitHub、Netflix、Heroku、Kickstarter、Twitch、Segment などの大手企業がこのアプローチを非常に成功させて使用しています。

このアプローチに関する他の人の経験について聞きたい場合は、次のリソースを確認してください。

数字で見る: アトミック CSS での 1 年半 by John Polacek
いいえ、ユーティリティクラスはインラインスタイルと同じではありません by Sarah Dayan of Algolia
GitHub でのユーティリティクラスの使用に関する Diana Mounter、ポッドキャストインタビュー

さらに詳しく知りたい場合は、アトミック/ユーティリティファースト CSS の事例をご覧ください。これはJohn Polacek氏がキュレーションしています。

​概要

​なぜインラインスタイルを使用しないのですか？

​保守に関する懸念

このページの内容

概要

なぜインラインスタイルを使用しないのですか？

保守に関する懸念