Tailwind CSS: за и против

По данным опроса The State of CSS 2020, больше всего разработчиков в мире, использующих CSS-фреймворки, сейчас заинтересованы в изучении и применении Tailwind CSS. Он опережает конкурентов в этом рейтинге уже второй год подряд. Команда Tailwind предлагает альтернативный подход для поддержки и стилизации HTML-разметки, но у него есть и свои противники. Проштудировав статьи и комментарии на таких ресурсах, как Dev.to, Product Hunt и Codeburst, мы собрали наиболее популярные доводы за и против использования этого фреймворка.

Концепт Tailwind CSS
Но сначала о том, чем Tailwind отличается от других CSS-фреймворков. Главное отличие — в том, что он не содержит какой-либо концепт дизайна, а предоставляет готовые классы, утилиты и директивы для стилизации и разметки HTML-тегов. Такой подход позволяет реализовать полностью настраиваемый дизайн компонентов без написания даже строчки пользовательского CSS-кода. Авторы фреймворка предполагают, что разработчики получат от этого следующие преимущества:

Не нужно тратить время на придумывание названий для CSS-классов.
CSS код почти не увеличивается в размерах, а все классы и утилиты используются многократно. Поэтому редко когда придется писать новый CSS-код.
Вносить изменения безопаснее. Не нужно переписывать CSS, если достаточно поменять классы в HTML.
Еще из полезных функций: тему можно настроить под свой проект, адаптивные утилиты Tailwind помогут создать полностью отзывчивый интерфейс, а наведение, фокус и другие состояния легко стилизовать с помощью служебных классов. Функция @apply при этом позволяет использовать Tailwind-классы для создания собственных переиспользуемых абстракций:

<!-- Using utilities -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>
 
<!-- Extracting classes using @apply -->
<button class="btn btn-green">
  Button
</button>
 
<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

За Tailwind CSS
Синтаксис
Синтаксис Tailwind очень прост: к элементам HTML или JSX добавляются имена классов. Вот как это выглядит на примере уведомления, созданного с помощью этого фреймворка:

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


Каждое имя класса содержит одно или несколько свойств CSS. Например, flex — это display: flex;, p-6 — padding: 1.5rem, mx-auto — margin-left: auto; margin-right: auto; и так далее. Этот подход очень прост и полезен, так как сложные компоненты строятся из ограниченного набора примитивных утилит.

Встроенная отзывчивость, псевдоклассы и стили
Отзывчивый дизайн, стилизация элементов и псевдоклассов, таких как hover, focus, active, доступны прямо в HTML-коде. Весь стиль определяется самим элементом. Это означает, что посмотрев на элемент, вы сразу поймете его стили. При этом вам не нужно открывать другой файл, чтобы редактировать CSS-правила.

По умолчанию Tailwind использует систему брейкпоинтов mobile first, аналогичную той, которая используется в других фреймворках, таких как Bootstrap.

Меньше CSS-кода
Размер CSS-кода не растет линейно. Имена классов совместно используются элементами, а это гарантирует постоянный размер пакета. Кроме того, Purge CSS удалит все неиспользуемые стили, поэтому кодовая база не будет перегружена.

Более высокая производительность
Написание классов Tailwind происходит быстрее, чем в CSS или CSS-in-JS. С использованием Tailwind верстка сводится к добавлению классов CSS к HTML-разметке.

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

Рассмотрим это на примере. В обычном CSS у нас было бы:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
 
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
 
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
 
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Это может показаться легким для чтения. Однако представьте, что у вас есть сотни классов. Вскоре код может стать трудным для чтения и изменения.

Теперь посмотрим на Tailwind:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

Здесь мы определяем ширину для каждой точки брейкпоинта, при этом мы всего лишь поменяли стили внутри элемента. А позже будет намного проще удалить или изменить стили, поскольку они не будут связаны с сотнями правил.

Множество вариаций настройки проекта
Tailwind предоставляет разработчику рабочую тему по умолчанию, которая подойдет для множества проектов. Есть и возможность расширять или изменять настройки с помощью файла tailwind.config.js. Он также позволяет добавлять собственные плагины, что открывает целый мир возможностей для сторонних разработчиков.

Против Tailwind CSS
Создание сложных анимаций
Несмотря на то, что простые анимации включены в готовом виде, а другие можно добавить через конфигурацию, сложную анимацию в Tailwind очень сложно реализовать. Но проблему можно решить с помощью простого CSS, библиотеки анимации, такой как Framer Motion, или библиотеки CSS-in-JS, такой как Styled Components.

Уродливый HTML
Базовые классы содержат одно-два CSS-правила, поэтому может потребоваться много классов для стилизации отдельного тега. Это значит, что HTML-разметка будет выглядеть раздуто и неряшливо с эстетической точки зрения. Но не только эстетика может пострадать — во множестве классов, написанных в одну строку, будет легко запутаться.

Для наглядности посмотрите на пример ниже:

<div class="min-w-0 flex-auto space-y-0.5">
  <p class="text-lime-600 dark:text-lime-400 text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase">
    <abbr title="Episode">Ep.</abbr> 128
  </p>
  <h2 class="text-black dark:text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate">
    Scaling CSS at Heroku with Utility Classes
  </h2>
  <p class="text-gray-500 dark:text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium">
    Full Stack Radio
  </p>
</div>

Для решения этой проблемы авторы фреймворка предлагают использовать @apply. Например в проектах, где большая часть HTML ориентирована на имена классов с компонентной областью видимости (что близко по концепции к методологии БЭМ), @apply широко используется. Но это подводит к следующему вопросу.

@apply принципиально несовместим и нестандартен
Проблемы возникнут, если попробовать отказаться от Tailwind. Везде, где классы были созданы с помощью @apply, они просто перестанут работать. Особенно это будет болезненно для проектов, использующих компонентный подход.

Избыточная сложность настроек
Токены дизайна Tailwind настраиваются с помощью сложной системы на JavaScript. Настройки темы Tailwind можно заменить настраиваемыми CSS-переменными (CSS Custom Properties), которые поддерживаются всеми браузерами, кроме Internet Explorer.

Tailwind CSS плохо работает через CDN
Минусы подключения через CDN:

Нельзя настроить тему
Нельзя использовать директивы: @apply, @variants и т.д.
Нельзя включить дополнительные варианты, такие как group-focus
Нельзя устанавливать сторонние плагины
Нельзя избавиться от неиспользуемых стилей
Это будет минусом для тех, кто привык не хранить у себя стандартный код. Единственный приемлемый вариант использования CDN — для прототипирования.

Tailwind забывает о существовании веб-компонентов
Tailwind полностью непригоден для использования в Shadow DOM. Некоторые предприимчивые разработчики придумали решения, в которых отдельные элементы стиля Tailwind можно внедрить в компоненты в процессе сборки, но это определенно “костыль”.

Вместо этого Tailwind поощряет суп с тегами div/span. Использование тегов <div> и <span> повсюду в разметке — это анти-шаблон. Пользовательские элементы полностью поддерживаются современными браузерами, и нет причин этим пренебрегать. Например вместо <div class = “card”> </div> можно написать <ui-card> </ui-card>.

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

Но хотя Tailwind очень хорошо подошел многим разработчикам, это не значит, что это идеальное решение для каждого проекта. Стоит взвесить его преимущества для кодовой базы и потенциальное влияние на команду, прежде чем рассматривать его применение.
Теги:
Tailwind
Добавлено: 29 Июня 2021 07:37:08 Добавил: Андрей Ковальчук
Добавить