Действительно ли Tailwind CSS того стоит?

Действительно ли Tailwind CSS того стоит?

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Плюсы Tailwind

1. Это значительно ускоряет процесс стилизации

Несомненно, Tailwind помогает вам намного быстрее стилизовать элементы HTML. Поскольку вам не нужно оставлять разметку, вы можете практически напрямую стилизовать элементы. Вы можете создавать красивые макеты гораздо быстрее, чем делать это с нуля.

2. Это обеспечивает больше удобства

Вам не нужно иметь дело с множеством проблем, с которыми сталкиваются многие разработчики при использовании CSS. Не секрет, что многие разработчики не любят CSS или считают, что с ним сложно иметь дело. Для такого разработчика использование встроенных классов, которые предоставляет Tailwind, избавит его от многих проблем с CSS.

3. Обеспечивает безопасность

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

Давайте перейдем к обсуждению некоторых возможных недостатков использования Tailwind CSS.

Минусы Tailwind

1. Ваша разметка становится очень подробной

Если вы видели, как обычно используется Tailwind, вы предоставляете HTML-элементы с кучей классов Tailwind, которые отвечают за стили. Мне довольно трудно читать, что делают классы. На мой взгляд, это неестественный способ работы с CSS, и он разрушает концепцию «разделения задач». Мне нравится, когда мой стиль отделен от разметки, а не смешивать их слишком много.

Чтобы проиллюстрировать, что я имею в виду, вот пример использования Tailwind с их официального сайта:

Действительно ли Tailwind CSS того стоит?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пример классов Tailwind

Не знаю, как вы, но для меня это очень многословно и довольно трудно читаемо.

2. Возможно, вам придется время от времени обходить структуру

Это еще одна проблема, с которой вы можете столкнуться. Если вы не можете найти поддержку для вашего конкретного варианта использования в документации, вам может потребоваться немного настроить фреймворк в соответствии с вашими потребностями. По сути, вы создадите свою собственную небольшую структуру вокруг Tailwind. Я предпочел бы иметь полный контроль над своим стилем с самого начала, вместо того, чтобы переопределять встроенные стили Tailwind в дальнейшем.

3. Это костыль для разработчиков, плохо знающих CSS

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

4. Чтобы стать продуктивным, нужно время

Это, конечно, компромисс с любым фреймворком. Но факт остается фактом: когда вы принимаете новый фреймворк, потребуется время, чтобы он стал продуктивным.

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

Думаю, здесь все сводится к личным предпочтениям. Если вы готовы потратить время на изучение фреймворка, чтобы в конечном итоге ускорить стилизацию CSS, сделайте это. Лично мне нравится писать его с нуля, потому что таким образом я лучше контролирую свои классы CSS.

Заключение

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

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

Я, вероятно, еще больше изучу Tailwind в будущем и, возможно, позже передумаю. Но пока я думаю, что мне лучше без него, поскольку я не вижу большей ценности в его использовании, в сравнении с написанием собственного CSS.

Автор: Yamo Gebrewold

Источник: medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.