Tailwind CSS — подведение итогов после двух с половиной проектов
В последнее время Tailwind наделал много шума. Но со всей этой шумихой, конечно же, приходит и много негативной реакции. С какими критическими замечаниями сталкивается Tailwind? И насколько они справедливы для меня — full-stack разработчика, которому больше нравится бэкенд, чем фронтенд?
Около двух лет назад моя сестра решила, что хочет начать рукоположение у врача. Поддерживающий брат я предложил ей сделать сайт. Или хотя бы реализовать дизайн, созданный кем-то другим — я очень плохой дизайнер. Получив дизайн, я сел, чтобы оценить свои варианты создания веб-сайта в наши дни.
WordPress, безусловно, отличный вариант для такого маленького веб-сайта, но, честно говоря, он все еще кажется слишком большим и неуклюжим. Поэтому я остановился на hugo и создал небольшую сторону JAMstack.
Хотя я полноценный веб-разработчик, я никогда не интересовался изучением CSS наизнанку и просто использовал набор инструментов, который использовала моя компания, в основном Bootstrap и некоторые пользовательские классы CSS. Но поскольку Bootstrap использует (использовал) jQuery для своего JavaScript, я не хотел его использовать. Проведя небольшое исследование и предварительно использовав Tailwind CSS в некоторых небольших сторонних проектах, я решил использовать его в качестве своего CSS-фреймворка и для этого проекта.
С тех пор я использовал этот дизайн-фреймворк в двух готовых проектах и в одном, над которым я все еще работаю. Мне очень нравится эта система, потому что даже я могу создать пользовательский интерфейс, который не будет уродливым и не будет выглядеть абсолютно «обобщенным Bootstrap». Кроме того, достаточно просто сделать веб-сайт/веб-приложение адаптивным. Прочитав некоторых критиков о Tailwind, я решил написать свой ответ на него и объяснить, почему я считаю, что большинство из них недействительны — по крайней мере, для моего варианта использования.
Критика № 1: Tailwind CSS загрязняет HTML
Для первых двух проектов я использовал простой Tailwind CSS без каких-либо других инструментов. Я использовал служебные классы в своем HTML, которые действительно делали неясной семантику определенного элемента. Но это сработало! И было действительно легко смягчить эту проблему.
Я создал партиалы/компоненты со значимым именем. Таким образом, смысловое значение определенного элемента становится ясным, а внешний вид определяется в одном месте. Когда я хотел изменить небольшую деталь, я просто подгонял там напильник. Я также сделал возможным перезаписывать некоторые части дизайна, чтобы я мог настроить его внешний вид для определенного места.
В одной из критиков, которую я читал, автор сказал, что это решение создаст другие проблемы, такие как сверление винта. (Передача свойства всем компонентам до тех пор, пока оно не будет использовано окончательно) На мой взгляд, это неправомерная критика. Если вы решили использовать компонентный фреймворк, такой как React, всегда есть решение этой проблемы — у React есть хуки, а также Redux. А когда вы используете такой фреймворк и не используете компонент, то вы действительно что-то упускаете и вообще не должны были его использовать.
В моем третьем проекте я также добавил daisy ui. Это дает мне несколько предопределенных элементов, и я могу очень легко настроить дизайн. Но сейчас мне еще рано говорить, нравится мне больше этот фреймворк или нет.
Замечание № 2: Tailwind CSS заставляет вас забыть о CSS
Как упоминалось в начале, мне действительно не нравится делать что-то во внешнем интерфейсе. Поэтому я не понимал модель flexbox, когда начал работать над сайтом для своей сестры. Но так как эта модель делает так много вещей намного проще, мне пришлось освоиться и с ней. И я сделал. Мне ни в коем случае не мешало то, что я использовал Tailwind, я даже думаю, что это облегчило мне понимание некоторых концепций CSS, потому что мне действительно нужно было использовать их, а не просто использовать какой-то «семантический» класс CSS, который другие предлагают фреймворки.
Теперь я думаю о Tailwind как о более простом CSS API. Что-то вроде jQuery раньше было для DOM API/XHR API, когда ему действительно не хватало функций и он был настолько разным для разных браузеров¹.
Или, если использовать другое сравнение, он ведет себя так же, как ActiveRecord ведет себя с SQL. Многие утверждали, что с ActiveRecord вам не нужно знать SQL, но это не так. Конечно, вы можете написать приложение, не зная SQL, но вам будет очень сложно, если вы не знаете основных понятий. А когда вы хотите изучить SQL, ActiveRecord помогает, потому что вы можете прочитать сгенерированный SQL и посмотреть, как он работает. И затем, если вы знаете SQL, ActiveRecord все еще намного удобнее в использовании. И если вам нужна мощь простого SQL, она тоже для вас.
Критический анализ № 3: Tailwind CSS разрушает Cascading
Другой критик заключается в том, что Tailwind разрушает каскадирование. Это может быть правдой. Но лично мне не нравится, когда на элементе происходит много каскадов. Это похоже на глубокую объектно-ориентированную иерархию классов. Это мощно, но позволяет легко все испортить.
Когда мне приходится отлаживать сбой пользовательского интерфейса на работе, я всегда задаюсь вопросом, откуда взялся тот или иной дизайн. И когда я обнаруживаю проблему, мне часто приходится перезаписывать атрибут только для одного элемента.
Но это может быть другим опытом для вас. Если вы действительно знаете CSS и можете справиться со сложностью, которую добавляет каскадирование, это может стать для вас настоящей проблемой.
Что я должен сказать после двух с половиной проектов с использованием Tailwind, так это то, что это идеальное решение для моего варианта использования и с моим набором навыков. Это помогает мне с легкостью создавать веб-приложения, а это именно то, что я ищу в рамках CSS. Но, пожалуйста, помните, что я не могу говорить о больших проектах (пока) и я вообще не занимаюсь внешним дизайном.
¹ API CSS, конечно же, сегодня работает одинаково в разных браузерах, но я использовал это сравнение только для того, чтобы оценить ощущения от использования Tailwind и то, как это увеличило скорость моей разработки.
Не средний участник? Зарегистрируйтесь здесь и поддержите меня в процессе написания!
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.
