Перевод: Gernot Gradwohl — Tailwind CSS— A recap after two and a half projects

Tailwind в последнее время вызвал много ажиотажа. Но при всей этой шумихе, конечно же, есть и негативная критика. Почему критикуют Tailwind? И как, не смотря на критику полюбить Tailwind — fullstask разработчику, которому бэкэнд нравится больше, чем фронтенд?

Года два назад моя сестра решила, что хочет стать врачом. Я решил поддержать ее, и предложил ей создать сайт. Или, по крайней мере, реализовать дизайн, созданный кем-то другим — так как я действительно плохой дизайнер. Получив дизайн, я решил оценить свои возможности по созданию веб-сайта в наши дни.

WordPress  — отличный вариант для такого маленького веб-сайта, но, честно говоря, он все равно казался слишком большим и неуклюжим. Поэтому я остановился на hugo и выбрал в качестве стека JAMstack.

Хотя я fullstask веб-разработчик, я никогда не заботился об изучении CSS всерьез и просто использовал готовый дизайн, который использовала моя компания, в основном Bootstrap и некоторые пользовательские классы CSS. Но поскольку Bootstrap (раньше) использует jQuery для своего JavaScript, я решил его не использовать. Проведя небольшое исследование и заранее проверив Tailwind CSS в некоторых небольших второстепенных проектах, я решил использовать его в качестве CSS-фреймворка и для этого проекта.

С тех пор я использовал этот фреймворка в двух завершенных проектах и в одном, над которым я все еще работаю. Мне очень нравится эта система, потому что даже я могу разработать интерфейс, который не был бы уродливым и не выглядел бы абсолютно шаблонным в случае Bootstrap. Кроме того, достаточно легко сделать веб-сайт / веб-приложение адаптивным. Прочитав несколько критических отзывов о Tailwind, я решил написать свой отзыв на него и объяснить, почему я считаю, что большинство из них неверны — по крайней мере, для моего варианта использования.

Критика №1: Tailwind CSS загрязняет HTML

В первых двух проектах я использовал простой Tailwind CSS без каких-либо других инструментов. Я использовал служебные классы в своем HTML, что действительно сделало неясной семантику определенного элемента. Но это сработало! И решить эту проблему было действительно легко.

Я создал части / компоненты с осмысленными именами. Таким образом, семантическое значение определенного элемента становится ясным, а внешний вид определяется в одном месте. Когда мне нужно было изменить небольшую деталь, я просто поправлял это там в одном файле. Я также сделал возможным перезапись некоторых частей дизайна, чтобы я мог настроить его внешний вид для определенного места.

В одной из критических заметок, которых я читал, автор сказал, что это решение создаст другие проблемы, такие как prop drilling. (Передача свойства всем компонентам до тех пор, пока оно не будет окончательно использовано) На мой взгляд, это не верное замечание. Если вы решили использовать компонентный фреймворк, такой как React, всегда есть решение этой проблемы — у React есть хуки, а также Redux (сам фреймворк разделяет все на независимые компоненты). А когда вы используете такой фреймворк как React не используете компонентный подход, тогда вы действительно совершаете глупость и вообще не должны его использовать.

В моем третьем проекте я также добавил daisy ui. Это дает мне несколько предопределенных элементов, и я могу очень легко настроить/изменить дизайн. Но сейчас мне еще рано говорить, нравится мне больше с этим фреймворком или нет.

Критика № 2: Tailwind CSS заставляет вас забыть о CSS

Как упоминалось в начале, мне действительно не нравится делать что-то с интерфейсом. Поэтому я не понимал как работает модель flexbox, когда начинал работать над сайтом для своей сестры. Но поскольку эта модель значительно упрощает многие вещи, мне пришлось освоиться и с ней. И я это сделал. Во всяком случае, мне не помешало то, что я использовал Tailwind, я даже думаю, что это помогло мне лучше понять несколько концепций CSS, потому что мне действительно приходилось использовать их, а не просто использовать какой-то «семантический» класс CSS, который предлагают другие фреймворки .

Теперь я думаю о Tailwind как о более простом CSS API. Что-то вроде jQuery который раньше использовалось для DOM API / XHR API, когда ему действительно не хватало функций и он сильно отличался для разных браузеров¹.

Или, используя другое сравнение, он ведет себя так же, как ActiveRecord для SQL (Одна из версий ORM). Многие утверждали, что с ActiveRecord вам не нужно знать SQL, но это неправда. Конечно, вы можете написать приложение, не зная SQL, но вам будет очень сложно, если вы не знаете концепций. А когда вы хотите изучить SQL, ActiveRecord помогает, потому что вы можете читать SQL, который он генерирует, и видеть, как он работает. К тому же, если вы знаете SQL, ActiveRecord по-прежнему намного удобнее в использовании. И если вам нужна мощь простого SQL, он тоже есть для вас.

Критика № 3: Tailwind CSS разрушает Cascading

Другое критическое замечание состоит в том, что Tailwind разрушает каскадирование. Это может быть правдой. Но лично мне не нравится, когда элемент содержит много каскадов (иерархию классов). Это похоже на глубокую объектно-ориентированную иерархию классов. Это мощный инструмент, но с его помощью легко все испортить.

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

Но у вас может быть другой опыт. Если вы действительно знаете CSS и можете справиться со сложностью, которую добавляет каскадирование, это может стать для вас настоящей болью.

Что я должен сказать после двух с половиной проектов с использованием Tailwind, так это то, что это идеальное решение для моего варианта использования и с моими навыками. Оно помогает мне с легкостью создавать веб-приложение, а это именно то, что мне нужно. Но, пожалуйста, обратите внимание, что я не говорю о больших проектах (пока), и я вообще профессионально не занимаюсь фронтенд-дизайном.

¹ CSS API, конечно, сегодня работает достаточно схожим образом в разных браузерах, но я использовал это сравнение только для того, чтобы показать, каково это использовать Tailwind и как оно увеличило скорость моей разработки.