Перевод статьи Anthony Fu "Reimagine Atomic CSS". Первая часть.

#unocss #antfu #tailwind

Вторая часть статьи Anthony Fu "Reimagine Atomic CSS".
UnoCSS

#unocss #antfu #tailwind

⁣
PrimeVue сделал Tailwind версию себя

#ui #tailwind #primevue

Какое-то странное сравнительное исследование Tailwind и CSS

#css #tailwind

Пару центов в копилку Tailwind

Tailwind ориентировочно берет свои корни в Bootstrap с его атомарными классами. Но, во-первых, их было немного. Во-вторых, они не ставили своей задачей замену CSS. В-третьих, их использовали преимущественно для разметки (d-flex, mt-1 и p-2)

CSS3 сегодня очень развитый язык с очень богатым продуманным функционалом (#css). Возврат от него к атомарным классам ( = стилям) это как эволюционный регресс от многоклеточных кольчатых червей к одноклеточным амебам. Потенциально влекущий деградацию многоклеточных программеров в одноклеточные.

Есть ситуации, когда атомарные классы как-то решают некоторые возникающие проблемы - например, при отсутствии деления на компоненты. Но для Vue с его компонентным подходом и scoped стилями таких проблем не возникает в принципе. В то же время, все такие проблемы решаются более разумными и элегантными подходами, например, с помощью BEM или CSS modules.

Названия классов в HTML служат одновременно целям программирования и документирования кода. Tailwind отнимает у разработчиков аспект семантики.

Девиз Tailwind: "чукча не читатель, чукча писатель". Зная его можно быстро написать строку классов элемента. Дальше что? Тебе надо подправить margin у внутреннего элемента меню. Ты сперва ищешь этот элемент среди нескольких div-ов. Затем ты вглядываешься в свою портянку и ищешь букву "m". Ты должен внимательно пробежать её глазами, - иногда всю, и иногда не один раз. Это DX.

В CSS ты мгновенно видишь лексему .menu-item, верней даже сперва .menu, потом в ней .item, и так же мгновенно находишь внутри блока margin:. В умных книжках это называется бинарным поиском, его сложность O(log(n)). В случае с Tailwind имеем O(n). Это computer science.

Так же быстро и точно ты перемещаешься в CSS к нужному стилю мышкой, потому что ты перемещаешься по плоскости, по осям x и y. Tailwind допотопен в своей одномерености.

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

При попытке реализации на Tailwind нечто большего чем две темы (светлая/темная) и элементарная адаптивность, код внутри class="" становится огромным и практически нечитабельным и неподдерживаемым.

При росте проекта (увеличении числа html элементов и стилей в них) соотношение O(log(n)) / O(n) -> 0. Тэйлвиндеры по законам Дарвина просто вымрут, не адаптировавшись к новым условия окружающей среды, а вместе с ними и проекты на них. Это биология.

Попытки сделать Tailwind более developer-friendly (@apply, signals etc) просто являются приближением его к возможностям обычного CSS, но через жопу.

При обучении веб разработке при начинании с Tailwind человек упускает из поля зрения весь самостоятельный слой представления веб страницы / веб приложения, со своей архитектурой, семантикой, функционалом. Вместо трехмерного пространства (HTML , CSS, JS) он оказывается в двухмерном, где учится быстро "красить кнопочки".

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

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

#css #tailwind

В конце прошлого года маленькие любители атомарного CSS помогли владельцу Tailwind Адаму Уэтену въехать вот в этот новый домик.

Платные продукты и услуги, связанные c Tailwind , приносят Адаму несколько миллионов долларов в год

#tailwind