Почему Tailwind не для меня Перевод

Evg Evg 26 Декабря 2021 (ред)

Статья за март 2021 года, от Джареда Уайта на сайте dev.to. Которая начинает так: В последнее время я неоднократно спорил в сети по поводу Tailwind CSS. Я не горжусь этим. Я не люблю ссориться ни с кем. Я считаю, что люди, создающие Tailwind, талантливые и приятные люди. Но на чисто техническом уровне мне просто не нравится Tailwind. Для кого бы он ни был построен, он был построен не для меня.

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

Однако проблема, с которой я постоянно сталкиваюсь, заключается в растущем популярном мнении, что Tailwind CSS — это будущее. Так и должно быть. Другими словами, Tailwind самоуверенный и вдохновляет кадры евангелистов. Опять же, на определенном уровне это нормально. Например, Rails очень самоуверен, и мне нравится использовать Rails.

Но Tailwind определенно бросает вызов. Я процитирую непосредственно создателя Адама Уотана, выделенного прямо на сайте Tailwind:

«Лучшие практики» на самом деле не работают.

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

Я пробовала. И я его использовал. Много. Один из моих крупнейших клиентов работает над проектом, основанным на React и Tailwind. Так что, что бы вы ни пошли на меня, вы не можете обвинить меня в том, что я не дал Попутному ветру старую добрую попытку колледжа.

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

Так как комментарии Twitter и Hacker News явно не подходят для технических разговоров такого масштаба, я попытаюсь обрисовать реальные причины, по которым Tailwind не для меня.

Причина 1. Tailwind продвигает уродливый HTML

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

Ненавижу, ненавижу, ненавижу. Адам даже признает это в лоб, когда умоляет нас «подавить желание рвать достаточно долго, чтобы дать ему шанс…». Это негласное признание того, что написание разметки таким способом поначалу кажется уродливым и странным, но каким-то образом мы в конечном итоге просто «преодолеем это», потому что преимущества настолько велики.

Извините, ребята! Вы никогда не заставите меня оценить это:

<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 в чистоте! Проблема решена»

Что ж, это потенциальное решение, и на самом деле это то, что мы сделали в вышеупомянутом проекте. Но это подводит меня к следующему вопросу.

Причина 2: @apply принципиально несовместима и нестандартна (и во многом ненужна).

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

@apply mt-3 в файле CSS работает, только если вы используете Tailwind. Это требует присутствия Tailwind в процессе сборки. Если вы удалите Tailwind из процесса сборки, этот оператор не будет работать, и ваш CSS сломается.
Хотя это правда, что вы можете взять сгенерированный выходной CSS-код сайта и использовать его без Tailwind, обычно это объединенная компиляция из десятков, если не сотен небольших CSS-файлов, разбросанных по кодовой базе (если вы пишете файлы CSS для каждого компонента, как мы). Это не то, на что можно рассчитывать в отношении исходного кода.

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

И в качестве дополнительного бонуса написание всех ваших файлов CSS @apply везде, в основном, означает, что вы не изучаете и не создаете CSS. Вы пишете Tailwind. Сколько бы раз вы ни писали @apply flex, это не то же самое, что писать display: flex.

Теперь я понимаю, что у большинства из нас нет привычки регулярно менять фреймворки CSS в проектах. Но поверьте мне, я сделал это! Я сейчас работаю над клиентским проектом, мы переходим с Foundation на Bulma. Хотя это правда, что для этого требуется обновить кучу HTML и некоторые используемые таблицы стилей, будьте уверены, что любые пользовательские элементы стиля, которые мы написали ранее, снова будут работать без проблем, потому что, когда вы пишете простой старый CSS (или даже Sass), он просто работает несмотря ни на что.

Продолжение: https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90

…И поэтому Tailwind не для меня.


Почему опубликовал?

Возможно критика Tailwind будет кому-то интересна.

Сам слежу за слабыми и сильными сторонами разного ПО в той области чем занимаюсь. Это знать возможно надо.

Автору повезло, ему не особо нравится Tailwind, мне вообще не особо что нравится. ) Tailwind, Bootstrap, UIkit и т.д. Нет идеальных вещей. В одном одно, в другом другое. Вот сейчас делают тут css, и он так себе. И нарекания к Tailwind применимы, добавил компоненты (чтобы использовать и то и то). Хорошо, давайте напишем их (из существующих переменных), и… сделаем Bootstrap. Смысл тогда было использовать что-то другое?

А есть подход, всё больше использовать js. К этому, вообще не очень отношусь, точно не моё. Работать с одним (css и html) а использовать другое — js, переопределять и т.д. — не знай.

Опубликовано в Блог Evg

5 Ответов

  1. OleStep OleStep 26 Декабря 2021

    Tailwind — это здорово, но тот, кто не разбирается в создании CSS-макетов, не сможет волшебным образом понять тот же макет с классами Tailwind.

    Подозреваю, что порог входа у Atomic CSS подхода, выше. Пример:

    pr20 — вы знаете что это: padding-right: 20px;? А вы знаете, что такое padding? Тут пиксели, а есть там еще и em, а в чём разница? И другое…

    Я хочу сказать, что в Bootstrap есть например, КНОПКА (.button). Я могу не знать css и добавить её в шаблон, тут я должен.

  1. Yori Yori 26 Декабря 2021 (ред.)

    Здесь дело в личных предпочтениях. 

    Мне нравятся классы Tailwind тем (или любого другого атомарного CSS-подхода) что это очень окупается для крупных [корпоративных] проектов.

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

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

  1. xiaoyu xiaoyu 28 Декабря 2021 (ред.)

    same feeling. Like global in PHP, it is not evil.

  1. 4xpro 4xpro 5 Февраля 2022 (ред.)

    Вообще считаю CSS-фреймворки злом. По сути, их придумали для того, чтобы уменьшить зависимость кода от конкретного разработчика и якобы экономии времени. Но по факту затраты времени на освоение frameworkа всю эту экономию съедают (если верстать по 2—3 сайта в год, а не работать на fulltime именно верстальщиком). И всегда есть риск, что тот или иной framework через пару лет устареет и придётся переучиваться, тогда как с чистым CSS это всё же в разы менее вероятно. В общем, надо изучать основы (алгоритмы, протоколы и спецификации), а не frameworkи и библиотеки!

    1. Evg Evg 5 Февраля 2022 (ред.)

      Поддерживаю на все 100. База. Это везде так, в любом деле. База нужна, первый класс. С ним обычно проблемы, его пролетают. А последствия, они всплывать начинают потом. Кстати, даже кто хорошо разбирается, частенько снова и снова возвращаются к основам, освежить память и взглянуть возможно по новому.