Пытаюсь понять почему tailwind это хорошо
Я сейчас собираюсь делать новый проект на NextJS для SSG / materialUI / и выбираю то ли остаться на styled-components в которых я кайфую потому что все просто и понятно, то ли что то новое (Tailwindcss ) 2 дневный первый взгляд на Tailwindcss tailwindcss Возможно у этой библиотеки высокая производительность потому что во первых на выходе получаем css, который почти на 100% будет содержать только нужный css, потому что tailwind смотрит на то что мы использовали в html и только это добавляет buid. почему почти? потому что разработчик создавая кастомные стили и добавляя в white list все равно может забыть их оттуда убрать. А white list добавляется добавляется в build. Так как генерируется файл в котором содержится все что нужно, это означает что кэширование стилей будет оптимально использоваться в браузере один раз загрузился ибольше не меняется (но это не точно), у styled components стили подгружаются динамически и это занимает какое-то время 0.0 с чем то там секунд, пользователь этого даже не заметит, из плюсов динамической подгрузки при загрузке странице грузится меньше стилей, потому что остальные подгружаются постепенно. По моему выгоды по производительности практически нет. И теперь я размышляю какая выгода от этого разработчику Нужно учить псевдонимы классов Открываем на одном мониторе Работаем ли мы только с html? Основные плюшки Tailwind это то что пишем код только в html и почти не используем css файлы, но тут опять засада мы ограниченны этими классами да их достаточно много , но на пример width 300 нет так что спроси у тракториста ![]() Это значит надо добавить такую секцию, секции описаны в документации
как выглядят стили в html Есть прикольная картинка с чем придется работать разработчику, и если вы думаете что это какая то генерация, которая накидала дополнительных классов то это и есть рабочий код программиста. просто несколько стилей адаптированы к md другие к lg и скажите спасибо что еще focus с hover нет.. или с сайта раздел mobile first там есть кусок кода который по ширине одного элемента не влез в экран ![]()
![]() Отсутствие семантики Статья от автора библиотеки Ну эта проблема решаема, просто добавьте еще немножко классов или переименовывать сами элемент dom в более семантичные например вместо div использовать person ![]() Есть и плюшки для VSC от Tailwindlab есть плагин, который расшифровывает названия классов, и показывает ошибки в файле конфигурации, к сожалению он не транслирует свойство css в соответствующий класс, если бы эта фича была я моя бы уверенность в полезности этой библиотеки резко возросла бы. Выводы Попробую написать несколько простых страничек, а там видно будет. Основное что смущает это количество классов в одном элементе если это как то можно решить то остальное не проблема. Интересно узнать Ваше мнение, особенно у тех кто с этой библиотекой работает. ЗЫ нашел на хабр статью Взгляд на Tailwind CSS, пара комментариев это очень крутая библиотека я ее везде использую ![]() |
Всего комментариев 0
Комментарии