Полезность прежде всего

Обзор

Традиционно, когда вам нужно стилизовать что-то в сети, вы пишете CSS.

С Tailwind вы стилизуете элементы, применяя уже существующие классы непосредственно в Вашем HTML.

В приведенном выше примере мы использовали:

• Утилиты Tailwind flexbox и padding (flex, flex-shrink-0 и p-6) для управления общей компоновкой карточки.
• Утилиты max-width и margin (max-w-sm и mx-auto) для ограничения ширины карточки и ее центрирования по горизонтали
• Утилиты background color, border radius и box-shadow (bg-white, rounded-xl и shadow-md) для стилизации внешнего вида карточки
• Утилиты width и height (w-12 и h-12) для изменения размера изображения логотипа
• Утилиты space-between (space-x-4) для обработки расстояния между логотипом и текстом
• Утилиты font size, text color и font-weight (text-xl, text-black, font-mediumи т.д.) для стилизации текста карточки

Такой подход позволяет нам реализовать полностью настраиваемый дизайн компонента без написания ни одной строчки пользовательского CSS.

Теперь я знаю, о чем вы думаете “это злодеяние, какой ужасный беспорядок!” И вы правы, это некрасиво. На самом деле практически невозможно подумать, что это хорошая идея, когда вы впервые ее видите - вы должны действительно попробовать.

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

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

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

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

Обычная реакция на этот подход - спросить: “Разве это не просто встроенные стили?” и в некотором смысле это так - вы применяете стили непосредственно к элементам, вместо того, чтобы присваивать им имя класса, а затем стилизовать этот класс.

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

• Проектирование с ограничениями. При использовании встроенных стилей каждое значение является магическим числом. С помощью утилит вы выбираете стили из предопределенной design system, что значительно упрощает создание визуально согласованных пользовательских интерфейсов.
• Адаптивный дизайн. Вы не можете использовать медиа-запросы во встроенных стилях, но вы можете использовать responsive utilities Tailwind, чтобы легко создавать полностью адаптивные интерфейсы.
• Наведение, фокус и другие состояния. Встроенные стили не могут нацеливаться на такие состояния, как наведение или фокус, но state variants Tailwind упрощают стилизацию этих состояний с помощью служебных классов.

Этот компонент полностью адаптивен и включает кнопку со стилями наведения и фокуса и полностью построен с использованием служебных классов:

Проблемы с обслуживанием

Самая большая проблема с обслуживанием при использовании подхода, ориентированного на полезность, - это управление часто повторяющимися комбинациями утилит.

Это легко решить с помощью extracting components, обычно в виде частей шаблона или компонентов.

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

Вы также можете использовать функцию Tailwind @apply для создания абстракций CSS вокруг общих служебных шаблонов.

Кроме того, поддержка проекта CSS, ориентированного на служебные программы, оказывается намного проще, чем поддержка большой базы кода CSS, просто потому, что HTML намного проще поддерживать, чем CSS. Такие крупные компании, как GitHub, Heroku, Kickstarter, Twitch, Segment и другие, с большим успехом используют этот подход.

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

• В цифрах: полтора года с атомарным CSS от Джон Полачек
• Создание масштабируемой архитектуры CSS Сара Даян из Алголии
• Дайана Маунтер об использовании служебных классов на GitHub, интервью в подкасте

Чтобы узнать больше, ознакомьтесь с Доводы в пользу атомарного/утилитного CSS, куратором которого является Джон Полачек.