Основы подхода, ориентированного на утилиты

Обзор

Традиционно, для стилизации элементов веб-страниц используется 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>

С помощью Tailwind, элементы стилизуются путём применения готовых классов непосредственно в HTML.

<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 для гибких боксов и отступов (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.

Сейчас вы думаете, «это ужасно, какой кошмар!», и вы правы, это может показаться не лучшим решением с первого взгляда — необходимо попробовать.

Но как только вы создадите что-то таким образом, вы быстро заметите некоторые важные преимущества:

• Вы не тратите время на придумывание имён классов. Больше нет необходимости добавлять бессмысленные имена классов, чтобы что-то стилизовать, и больше нет необходимости ломать голову над идеальным абстрактным именем для элемента, который на самом деле просто контейнер с гибкой компоновкой.
• Ваш CSS перестаёт расти. Используя традиционный подход, ваши файлы CSS увеличиваются всякий раз, когда вы добавляете новую функцию. С утилитами всё повторно используется, поэтому вам редко нужно писать новый CSS.
• Внесение изменений становится безопаснее. CSS глобален, и вы никогда не знаете, что сломаете, внеся изменения. Классы в вашем HTML локальны, поэтому вы можете их менять, не беспокоясь о том, что что-то сломается.

Когда вы поймёте, насколько продуктивнее вы можете работать, работая исключительно с HTML с предопределёнными утилитарными классами, любая другая работа будет казаться мучительной.

Почему бы не использовать встроенные стили?

Частой реакцией на этот подход является вопрос «разве это не просто встроенные стили?», и в некотором смысле это так — вы применяете стили непосредственно к элементам вместо того, чтобы назначать им имя класса и затем стилизовать этот класс.

Но использование утилитарных классов имеет несколько важных преимуществ перед встроенными стилями:

• Проектирование с ограничениями. Используя встроенные стили, каждое значение — это магическое число. С утилитами вы выбираете стили из предопределённой системы дизайна, что значительно упрощает создание визуально согласованных пользовательских интерфейсов.
• Адаптивный дизайн. Вы не можете использовать медиазапросы во встроенных стилях, но можете использовать адаптивные утилиты 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 и другие, успешно используют этот подход.

Если вы хотите узнать о чьём-то опыте использования этого подхода, обратитесь к следующим ресурсам:

• By The Numbers: A Year and a Half with Atomic CSS Джона Полацека
• No, Utility Classes Aren’t the Same As Inline Styles Сары Даян из Algolia
• Интервью с Дианой Маунтер об использовании утилитарных классов на GitHub, подкаст

Для получения ещё большей информации, ознакомьтесь с The Case for Atomic/Utility-First CSS, собранным Джоном Полацеком.