Классический рок, Mario Kart и почему мы не можем договориться о Tailwind
📅 Опубликовано:1 мая 2024
Мой авторский перевод статьи «Classic rock, Mario Kart, and why we can’t agree on Tailwind» опубликованной 26 сентября 2023 года фронтенд-разработчиком из Канзаса, Джошом Колинсвортом [Josh Collinsworth] — сеньором фронтенд-разработчиком Deno
Эту статью обсуждали в 389 выпуске подкаста «Веб-стандарты», который я с удовольствием слушаю, поэтому и решил ее перевести. Далее, собственно, перевод.
Когда мы с братом были помоложе, наши музыкальные вкусы являли собой практически полярные противоположности. Я был законченным хипстером и смотрел на все через призму художественной ценности и новаторства. Меня с головой увлекали новые и актуальные исполнители.
Мой брат же напротив, практически никого и ничто не осуждал. Он был открыт для всего и вся, но вкусы его опирались преимущественно на классический рок 70-х и 80-х годов. Он любил открывать для себя заново старые альбомы популярных тогда исполнителей.
Я же, как и всякий элитарный сноб, — хейтил все популярное. И, разумеется, поэтому музыкальные вкусы брата были преданы анафеме.
Мой брат никак не мог взять в толк, что же именно мне так не нравится. Наконец он меня об этом однажды спросил.
Я на минуту задумался над вопросом, и выдал: «Все это стиль, но не содержание».
Он едва не лопнул со смеху.
«Так это же самый цимес!» — ответил он, ухмыляясь во весь рот. — «В этом то и есть весь мысл!»
Я знал, что мы смотрим на одни и те же вещи, а воспринимаем их по-разному. Но до этого я никак не мог понять, что у нас общие на то причины.
🤝 Мы не расходимся во мнениях там, где думаем, что расходимся
Tailwind сейчас настолько же вездесущь, как и поляризован. Полагаю, если вы дочитали до этого места, вы достаточно заинтересованы и мне не нужно приводить никаких подтверждений этому.
Сторонники Tailwind практически молятся на него, а некоторые даже утверждают, что Tailwind фиксит CSS, или, по крайней мере, делает его управляемым и предсказуемым так, как им не позволял этого сделать обычный CSS. Большинство популярных фреймворков и продуктов превосходно поддерживают Tailwind из-за его растущей популярности.
Противники утверждают, что Tailwind неряшлив и сложен для восприятия, и это очень мешает, он нарушает фундаментальные принципы веб-разработки, противоречит им, нивелирует мощь CSS, и вообще, он делает абсолютно противоположное, а не то, для чего был изначально предназначен: запутывает и делает поддержку проектов сложнее.
Многие, кто использует Tailwind никогда от него не откажутся, а те, кто не использует — никогда не пойдут на это.
Но как мы могли так решительно разойтись во мнениях?
Используя Tailwind уже достаточно много — как в профессиональной деятельности, так и в некоторых небольших личных проектах, — я пришел практически ко мнению, которое может быть вообще самым непопулярным относительно озвученного выше вопроса:
Обе стороны правы.
Ладно, ладно, я слышу неодобрительные возгласы. Никто не любит центристов. Но постарайтесь выслушайте меня.
Мы никогда ни к чему не придем обсуждая достоинства и недостатки Tailwind, по той же причине, по какой мы с братом не могли переубедить друг друга насчет музыки.
Мы могли бы сколько угодно препарировать Бон Джови и Суфьяна Стивенса. Но это было неважно, потому что наши разногласия начались еще до того, как мы нажали плэй.
Оказывается, мы с ним изначально воспринимали каждого исполнителя и альбом практически одинаково.
Мы просто не смогли договориться, что было фичей, а что багом.
Подозреваю, что аналогично и большинство людей, по разные стороны от Tailwind, на самом деле полностью согласны самой идеей существования Tailwind. Я не думаю, что наши разногласия связаны с атомарным CSS или с utility-селекторами. И что они проистекают из тех оценок, которые мы сделали еще до того, как выбрать инструмент. Там где один видит преимущество, другой — недостаток.
Tailwind действительно хорош.
Вместе с тем Tailwind — это плохая идея.
Это и то и то одновременно по совершенно одинаковым причинам.
🛠️ Пользователь определяет инструмент
Если вы играли в Mario Kart 8 Deluxe на Switch, то, возможно, знаете, что в игре есть функция Smart Steering (Умное рулевое управление).
Да, речь по-прежнему про Tailwind, потерпите немного.
Smart Steering — это, по сути, второй пилот на ИИ. Если эта функция включена, вы управляете героем-гонщиком как обычно, кроме случаев, когда вы начнете съезжать не туда, игра автоматически возьмет управление на себя и вернет вас на дорогу. Больше никаких выпадений с трассы и продираний сквозь траву обратно.
Smart Steering может помочь выровнять шансы в игре любой разномастной группы (особенно в продвинутых классах двигателей, где даже у опытных игроков есть риск быть выброшенными с трека).
Но по мере того, как вы становитесь все лучше и лучше в игре, Smart Steering начинает помогать все меньше и меньше, пока, в конце концов, не начинает мешать.
Smart Steering, например, не позволит срезать, эта функция не может определить, почему вы отклоняетесь от курса и ни при каких обстоятельствах не даст вам этого сделать. А может и сбить вас с намеченного курса в самый неподходящий момент.
У вас в голове может быть стратегия по которой вам нужно будет съехать с дороги (к примеру, вы хотели объехать разрушительное препятствие), но Smart Steering не позволит этого сделать, несмотря ни на что.
Кроме того, для сохранения игрового баланса, у игроков со Smart Steering отключены самые сильные бусты скорости.
Чем вы опытнее, тем сильнее, эта функция, созданная, чтобы усилить ваши возможности, — наоборот, начинает их подавлять. Но скажется ли это плохо или хорошо на вас, и в какой степени, зависит от того, из каких мы сфер.
Я довольно орошо играю в Mario Kart (Я играл в игры на базе Mario Kart около 30 лет, еще до того как появился Smart Steering), поэтому я не выношу Smart Steering. Я никогда им не пользуюсь. Большую часть времени, я могу его вообще не замечать. Он даже может иногда мне помогать. Но что мне особенно бросается в глаза, так это то, что он врывается в мой игровой процесс в самый неподходящий момент.
Smart Steering может удерживать меня на трассе, но также оно подавляет мои сильнейшие скилы. Эта функция мешает как достижению лучших результатов, так и позволяет избегать худших.
Тем, кто достаточно хорошо владеет CSS, кажется, что их вынуждают кодить с включенной функцией Smart Steering.
Вот почему любой мой разговор с кем-то, кому нравится Tailwind, вероятно, будет похож на попытку объяснить игроку в Mario Kart, почему мне не нравится Smart Steering, тому игроку который на эту функцию полагается в игре.
«Мне не нравится, что оно не дает мне выехать за пределы трассы».
«Что!? Зачем тебе вообще это понадобилось!?»
«Вообще-то, если проехать вот тут, вы можете вырваться вперед».
«Фу, как грязновато, знаете, best practice — это всегда оставаться на дороге, сосредотачиваясь именно на ней».
«Послушайте, я вас понимаю, но я занимаюсь этим уже довольно давно, и знаю, что делаю».
«Я просто не понимаю, зачем вы усложняете себе жизнь и делаете то, чего вам все равно делать не положено».
Примечание автора:
Я понимаю, что могу показаться весьма самонадеянным, выбирая такое сравнение. Ведь Mario Kart — это гоночная игра, и может показаться будто я считаю себя победителем, а людей, которые делают не так как я, — лузерами.
Это вовсе не моя цель; хочу лишь отметить, что если Tailwind — это ваш конек, то, скорее всего, это потому, что мы из разных сфер, и нам нравится играть в игру по-разному, по своим собственным и веским причинам.
🏆 Без компромиссов преимуществ не бывает
Обыкновенно, совершенно нормально видеть одно и то же по-разному, даже диаметрально противоположно.
Однако есть одна универсальная истина, которую, на мой взгляд, важно взять за основу, а именно: преимущества всегда связаны с компромиссами и наоборот.
По крайней мере, когда речь идет о CSS- и других фреймворках, когда что-то кажется проще, — на самом деле мы испытываем положительный эффект от какого-то архитектурного решения. И каким бы ни было это решение, у него есть свои недостатки. Теперь какая-то другая часть цепочки, скрытая от нашего взора, неоправданно усложнилась.
Не поймите меня неправильно. Это все равно неплохо. Часто новый набор компромиссов бывает предпочтительнее старого. Если бы это было не так, мы бы не использовали фреймворки.
Сложность существует всегда, даже если она перенесена туда, где вы не сталкиваетесь с ней регулярно.
Проблемы в технологиях не исчезают, они просто преобразуются в новые формы с острыми углами в других местах.
Поэтому мы должны относиться чрезвычайно скептически к любому фреймворку (на самом деле, к любому продукту), который утверждает, что устранил сложность, уничтожил ее, обратил в ничто — честно не оговаривая, возникающий из-за этого, побочный эффект.
Ок, хорошо, но почему это все так важно?
Потому что Tailwind часто позиционируется, и многие его сторонники говорят о нем, как о фреймворке, которому удалось решить эту невыполнимую задачу — уничтожить сложность обычного CSS.
Если бы вы привели этот аргумент, я бы категорически не согласился. Но я бы согласился, что в вашем конкретном случае вы правы.
Скорее всего, вы не заняты в тех областях, где есть компромиссы, поэтому вам может показаться, что их не существует.
Как бы скучно и лениво-центристски это ни звучало: я думаю, мы должны согласиться с тем, что Tailwind и vanilla CSS — это уникальные наборы компромиссов. Будем ли мы считать один из них лучше другого, во многом зависит от того, в чем мы проводим время, что для нас ценно и в чем, в конце концов, состоит наша цель.
Будем честны: у CSS действительно много сложностей и подводных камней, и по общему признанию Tailwind разными способами может сгладить эти острые углы.
Но также CSS — довольно мощное программное средство, которое с одной стороны выше Tailwind, но с другой, добавляет свои особенности.
It all depends™.
🌊 Водораздел: на какой стороне вы хотите быть?
Итак, если то, насчет чего мы несогласны — нам ценно, то, естественно, возникает вопрос: откуда этот раскол произошел?
На мой взгляд, разрыв между сторонниками и критиками Tailwind сводится к тому, какую сферу в работе они считают наиболее важной — или, по крайней мере, на какой они предпочитают сосредоточиться.
Поскольку продолжать придумывать определения для сторонников и противников утомительно, в рамках этого раздела я предлагаю как-то назвать эти две противоборствующие группы. Сами по себе эти названия будут грубыми обобщениями, а значит, иметь явные отклонения и быть ярко противоречивыми. Но давайте ради полезности модели, несмотря на ее недостатки, назовем группу в целом поддерживающую Tailwind — строителями, а группу, которая против — ремесленниками.
Это не значит, что ремесленники не создают фичи, или что строители не умеют мастерить крутые штуки. Но в качестве быстрого и грязного сравнения давайте остановимся нем, потому что, как мне кажется, эти определения намекают на ценности в двух этих группах.
🏗️ Строители
Для строителей ценно выполнить работу как можно быстрее и эффективнее. Работая над чем-то, что возможно состоит также из элементов, выходящих за рамки фронтенда, — им часто не терпится увидеть конечный результат. Это значит, строители могут ценить изначальное выполнение задачи больше, чем какие-то долгосрочные факторы.
Строители обычно говорят о Tailwind как о спасительном средстве, избавившем их от сложных штук в CSS. Им нравится, что Tailwind позволяет делать работу быстрее и аккуратнее.
В свою очередь, это подразумевает, что строителям важно выполнить эту часть работы как можно быстрее и проще. (Конечно, все мы ценим эффективность. Но то, где вы ее цените, может опосредованно говорить кое-что о ваших приоритетах.)
Еще это подразумевает одно или сразу оба обстоятельства:
- а) что раньше эта работа казалась им слишком сложной;
- б) и/или что это не та часть их работы, в которой они хотели бы испытывать трудности.
Скорее всего, они не избегают трудностей, просто предпочитают решать их в другой форме.
Опять же, здесь, конечно же, будет много отступлений и исключений. Но в целом строители — это, как правило, люди, которые сделали свою карьеру если не в других частях стека разработки, то, по крайней мере, в других областях фронтенда. То есть для большинства строителей, хотя и не для всех, CSS — не специализация, или, во всяком случае, он не в приоритете.
Многие, кому нравится Tailwind, хорошо разбираются и в CSS, но эти строители, как правило, используя Tailwind, придерживаются более сбалансированного подхода, пишут широкими мазками utility-классов и по максимуму настраивают конфигурационный файл и/или заполняют пробелы собственным CSS.
🔨 Ремесленники
С другой стороны, ремесленники, как правило, это опытные специалисты в CSS, они почти всегда получают удовольствие от той работы, которую Tailwind призван облегчить. Можно с уверенностью сказать, что у них нет трудностей с CSS, или, по крайней мере, в этой области им нравится справляться с трудностями.
Ремесленники, также как и строители, могут создавать целостные продукты и проекты. Но, как правило, ремесленники в меньшей степени сосредоточены на разработке интерфейсов как просто части процесса, они рассматривают разработку интерфейсов — как сам продукт. И их горизонт не ограничен просто завершением проекта.
Благодаря своим навыкам работы и готовностью решать любые интересные задачи с CSS, ремесленники часто воспринимают Tailwind как грубые инструмент, который не дает реализовать их навыки в полной мере. В худшем случае Tailwind нивелирует лучшее как в CSS, так и в их работе. Tailwind не в состоянии угнаться за новыми возможностями в CSS, и даже там, где это возможно, с помощью него нельзя реализовать все, что может CSS. В лучшем случае Tailwind для ремесленников представляет собой огромную кривую обучения, чтобы просто остаться на том же уровне своих навыков.
Скорость для ремесленников — не проблема, по крайней мере, она не так приоритетна, они больше сосредоточены на самом кодинге продукта. Стилизация — это именно то, где они хотят быть, потому что для них важнее сделать работу очень хорошо, чем просто сделать ее хорошо. Опять же, они считают свою работу основной и определяющей для продукта, а не просто одной из его составляющих.
Для ремесленников важнее такие долгосрочные факторы, как простота поддержки, читаемость кода и доступность. Они могут не считать проект завершенным до тех пор, пока все это не будет учтено.
💖 Строители и ремесленники
Как хорошо сказал Джереми Кит: когда речь идет о стилизации, строители хотят императивного программирования. Им хочется указать, что они хотят, где они хотят и как они хотят. Никаких сюрпризов.
Ремесленникам же напротив, нужно декларативное программирование. Они понимают, как использовать всю мощь правил стиллизации в сложной системе, и хотят пользоваться этой возможностью, а не заниматься микроменеджментом браузера.
Строители ценят предсказуемость. Они часто жертвуют этой мощью, если это устраняет риски и нестабильность.
Ремесленники ценят профессионализм, часто беря на себя больший риск и ответственность, если их возможности при этом расширятся.
Точки зрения как строителей, так и ремесленников вполне обоснованны. И, справедливости ради, как я уже говорил, между ними большая градация из вариантов. Вы можете балансировать между строительством и мастерством. Можете использовать Tailwind только там где хотите, а в остальном писать CSS вручную.
На самом деле вопрос лишь в том, что для вас ценно и на что вы хотите тратить свое время.
🚀 Заключение: моя точка зрения по поводу Tailwind
В продолжение эксплуатации приведенных выше различий, я считаю себя мастером. Поэтому я настороженно отношусь к любому инструменту, который подталкивает меня разрабатывать только каким-то одним определенным образом, особенно если этот способ получил распространение в моей профессии и стал настолько популярным, что большинство сайтов, созданных с его помощью, можно узнать с первого взгляда.
По-моему, чем больше вы оптимизируете инструмент для быстрой разработки, тем большую гомогенность вы им порождаете.
Соглашусь, что Tailwind может быть отличным решением, если его недостатки для вас не проблема или если у вас есть какие-то способы их смягчить.
Но для меня Tailwind — это сама по себе проблема. В вашем случае он может быть выгодным решением, и если это так, то здорово. Я долго и тщательно тестировал Tailwind и пришел к выводу, что для меня в нем нет плюсов.
Я не против работать в команде он используется, в конце концов, он действительно полезен как инструмент для однородности кода, но я хочу, по крайней мере, иметь возможность его не использовать по своему усмотрению, когда действительно полезно и необходимо. Я считаю, что все, кто работает с Tailwind, должны иметь такую возможность. Я бы даже сказал, что вы подавляете возможности своих мастеров, если не даете им такой степени свободы.
Меня не особо волнует насколько быстро я разрабатываю или насколько легко прототипирую, меня волнует лишь то, что я создаю что-то исключительно качественное и делаю это верным способом.
Кроме того, я бы сказал, что развитие фреймворков и CSS за последние несколько лет, сделало преимущества Tailwind во многих кейсах спорными. Теперь в CSS есть @scope. Есть каскадные слои @layer. Даже если вы не хотите использовать то, что предлагает браузер, большинство фреймворков (например, SvelteKit, Vue и Astro) предлагают scoped-стилизацию как решение из коробки. Или вы можете использовать CSS-модули.
Или, если в Tailwind вам нравятся только утилитарные классы, есть намного менее навязчивый Open Props.
Суть в следующем. Я считаю, что Tailwind вполне хорошо служил миру фронтенд-разработки до 2023 года. Я не ожидаю, что поклонники или организации переедут с него, но я действительно думаю, сейчас мы активно вырастаем из потребности в нем. Большинство решений, которые были реализованы в Tailwind, в те времена не были доступны без него, но сейчас они все больше и больше внедряются в браузеры и другие инструменты, которыми мы уже так или иначе пользуемся.
📜 Немного предыстории
Был период в моей карьере, когда я, как и остальные фронтенд-разработчики, с которыми я работал, были вынуждены писать абсолютно все на Tailwind. Там буквально даже не было таблицы стилей, куда бы можно было бы вставить CSS. Это было запрещено. Мы даже не могли редактировать конфигурационный файл Tailwind в течение почти всего времени, что я работал там. Власть имущие в той компании решили, что это лучший способ сделать так, чтобы все писали единообразно. Если это был не Tailwind, то это не попадало в прод.
(Все, кому я об этом говорил, считают это просто глупостью. Даже самые ярые поклонники Tailwind не исключают возможности просто отойти от Tailwind и в любой момент написать CSS, считая это необходимой и полезной функцией. Тем не менее, это была наша реальность).
Очевидно, что при принятии этого решения в зале ощущалась острая нехватка представителей.
Мы — команда фронтенда, пытались убедить сеньоров и больше ориентированных на бэкенд разработчиков, ответственных за это решение. Пытались объяснить, почему подход, основанный на использовании только Tailwind без какого бы то ни было CSS, не только ограничивает наши возможности реализовывать задумки наших дизайнеров, но и заставляет нас принимать сомнительные решения в архитектуре.
Кастомные компоненты начали бесконтрольно плодиться, до такой степени, что смысл в компонентах пропал напрочь. Возникла оживленная экономика контрабанды оформления в инлайн-стили.
Еще мы объяснили как эти изменения пагубно сказываются на работниках и работе. Из-за невозможности применять наш лучший инструментарий, мы были вынуждены делать больший упор на грубые костыльные решения, просто, чтобы достичь посредственных результатов.
Мы не были довольны, как и дизайнеры, чьи задумки мы реализовывали. (Попробуйте объяснить дизайнеру, что то, что он хочет, было бы не только возможно, но и относительно просто сделать, если бы вы не были заперты в мире, где существует только Tailwind).
Кроме того, это приводило к повсеместному злоупотреблению JIT-стилями. Скомпилированная таблица стилей в проекте разрослась до непомерных размеров, потому что каждая команда волей-неволей внедряла свои собственные одноразовые стили.
Страдали и процесс, и результат: разрабатывать было сложнее, а получалось хуже.
Как мы ни старались, эти объяснения, к сожалению, были отвергнуты. Все было как в предыдущем разговоре о Mario Kart: «Зачем вам съезжать с трассы? Вам не нужно этого делать!»
Для руководителей этой компании Tailwind был универсальным решением. По их мнению, любой, кому это не нравилось, не понимал и не знал что делает, или просто жаловался на, что его заставляют осваивать новый подход.
Они не могли понять, в чем тут минус.
По прошествии нескольких месяцев многие из моих коллег перешли в другие команды других подразделений компании. Некоторые, как я, — ушли совсем. Все это для меня, конечно, не было основной причиной, и, думаю, не было ею и для других. Но все же: если тебя душат в творческом плане люди, которые не пытаются понять твоих проблем и не верят, в что ты вообще понимаешь, о чем говоришь… что ж, это заставляет задуматься.
Я часто думаю как бы могла повернуться беседа в тех разговорах, как можно было бы убедить сеньоров, отвечающих за наши проекты, поверить в какую проигрышную ситуацию они нас загнали, представить подающий надежды восход солнца, который они наблюдали на своей стороне горы, как длинную, темную и зловещую тень, которую мы видели на своей.
Не знаю, смог бы я это сделать или нет. Но раз уж я потратил столько времени на разговоры о плюсах и минусах, и о том, что для одного человека баг, а для другого фича, давайте на этом кончим.
🥈 Две стороны одной медали
Там, где вы могли бы видеть полезного второго пилота, который удерживает вас на трассе, я вижу назойливого человека, который мешает в самый неподходящий момент.
Если Tailwind якобы избавляет вас от переключения контекста, то меня он отдаляет от сфер, где я делаю свою работу лучше.
Там, где вы видите инструмент, который помогает вам выполнить часть работы, которую вы или не можете выполнить хорошо, или просто не любите, я вижу упущенную возможность сотрудничества и оптимального применения всех наших скиллов. (Я также вижу пренебрежение тем, чем занимаюсь; ваш код важен; мой же — это то, что нужно написать так, чтобы оно просто нормально работало и двигаться дальше).
Там, где вы видите решенную проблему, я вижу технический долг, который просто еще не погашен. Там, где вы увидели, как легко и быстро можно что-то написать в первый раз, — я знаю на собственном не очень приятном опыте, как сложно будет потом это рефакторить и переделывать.
Там, где вы видите обещающий свободу инструмент, я вижу блокирующий механизм, который вы замучаетесь отключать.
Там, где вы видите простое прототипирование и быструю стилизацию, я вижу инструмент, который зашоривает нас для ускорения создания одинаковых веб-страниц и интерфейсов как у всех.
Там, где вы видите упрощение сложности, я вижу изначально мощный инструмент, отупленный и разбодяженный почти до неузнаваемости.
Там, где вы видите расширение возможностей, я вижу ограничения. Там, где вы видите защитные стены, я вижу клетку, которая сжимается.
Мы оба просто наблюдаем одни и те же истины, но с разных точек зрения.
Мы оба и правы и неправы.
Все зависит от того, как мы хотим пройти этот путь.