Верстка сайта еще никогда не была настолько простой! Вышла замена Bootstrap?

[@vanibron]

Я работаю в команде, которая использовала tailwind уже на нескольких крупных проектах на Next.js. В конечном счете можно сказать, что подход себя оправдал. В случае с использованием React-компонентов становится неважно, сколько раз у тебя повторяются классы и прочие моменты, актуальные для простого HTML. Если речь идет о кнопке, то она все равно объявлена один раз, и меняется что-то в одном месте. К тому же конфиг tailwind позволяет лепить из фреймворка что угодно. Конечно те же CSS modules дают гораздо больше свободы, и с tailwind приходится порой как следует изголятся. Но со временем стало ясно, что в итоге работа над проектами пошла быстрее. Сравнивать tailwind с бутстрапом смысла нет, кстати. Bootstrap - набор компонентов, tailwind - набор утилит (хотя компоненты там тоже можно легко создавать). В общем, инструмент однозначно не на любой случай - когда я просто верстаю лендинг, например, я по-прежнему использую BEM. Но вот в разработке на React все чаще обращаюсь к tailwind.

[@SuprunAlexey]

Хотел отдельно снять про реакт, спасибо за комментарий !

[@Tora20112]

Подскажите, пожалуйста, а как быстро поменять цвет кнопки, если класс *-red жестко прописан, а нужно поменять на синий, каждый шаблон менять? В BS можно переопределить класс bnt-primary например и т.д.

[@vanibron]

@@Tora20112 В конфиге можно создать такие же классы, как в bootstrap, например, и назначить им произвольные стили. BS и TW используют разные подходы по умолчанию, но TW дает возможность переопределить конфиг так, как заблагорассудится, удалив все значения по умолчанию. Вот пример из документации, как вместо названий цветов использовать условные термины primary, secondary и т.п. tailwindcss.com/docs/customizing-colors#naming-your-colors

[@OnlyLuck1000]

A chakra-ui не пробовали?

[@vanibron]

@@OnlyLuck1000 Не пробовали, и насколько я вижу, это система компонентов в духе ant.design, например. Это разные вещи. Tailwind упрощает работу со стилями и только.

[@grammidin]

Вместо двух классов написать десять. Действительно, удобно. И ни фига не запутаешься в них.

[@SuprunAlexey]

Не запутаешься

[@slprime-old]

@@SuprunAlexey ага, прикольный будет квест когда нужно будет немного изменить дизайн primary кнопки во всём портале.

[@SuprunAlexey]

Весело

[@vasil-vasil]

@@slprime-old так у них классы будут одинаковы?! Нет?

[@shvarts95]

Мне вообще эта тенденция не нравится, ради изменения цвета кнопки лезть в html и добавлять класс, вместо того чтобы сделать это в css, очень напоминает те времена когда стилизация делалась через атрибуты в html

[@vladislavsk5228]

Бредняк писать у тегов миллион классов что бы заменить примерно такое же количество стилей.

[@SuprunAlexey]

Тут важен сам подход, чуть позже поймёте

[@tr0yka]

я работал с чем-то подобным. С одной стороны немного проще и быстрее делать прототипы. Но с другой....Куча мусора в коде.

[@МаксимМакаров-к8б]

Я не совсем понимаю подход tailwind. С тем же успехом можно начать писать в атрибуте style. Посмотрите на крупные проекты. Там такой подход не приживается от слова "совсем". Все стремятся к изоляции стилей компонентов вместо замешивается их в одно поле из 600-800 классов. Потому что иначе вы не сможете масштабировать процесс разработки на большее количество кодеров. Tailwind это про быстрое прототипирование, которое надо выпиливать из проекта сразу как на нем появляется третий разработчик.

[@bytemusic7737]

директива @apply в помощь

[@eduardomavlyutov4710]

Аминь!

[@maxk.9302]

Спасибо за видео! Очень интересно;)

[@SuprunAlexey]

Спасибо

[@Владислав-э9щ5ф]

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

[@nikghost3356]

Довольно интересная штука. На первый взгляд это дико не удобно, но эта колбаса пишется один раз во время стилизирования элемента. Потом просто заменяем классом, куда через @apply bg-gray-500 px-2 hover:bg-red-100 пихаем всю колбасу и забываем.

[@ПавелСедой-р5п]

Нужно протестировать, интересно, хотя не являюсь сторонником фреймворков. Спасибо за видео.

[@SuprunAlexey]

Попробовать всегда можно

[@kyberplay4361]

Вродь нормуль css фрейм. Пасиба =). Попробую применить в проекте).

[@ITentrepreneur]

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

[@МаксимДубенко-в4т]

То есть, почти то же самое, что и с использованием атрибута "Style" в html

[@SuprunAlexey]

Попробуйте и сравните количество символов прописанных

[@МаксимДубенко-в4т]

@@SuprunAlexey По поводу кол-ва символов - да. Самому приходила идея, чтоб в названиях классов за основу были взяты сокращения, как в Emmet(если не ошибаюсь) В общем, чтоб максимально коротко

[@SuprunAlexey]

@@МаксимДубенко-в4т ну вот :)

[@borisoffdenis]

@@SuprunAlexey Смысл не в количестве симловов, в негибкости подхода. Ось изменений проходит не через одну точку (каскадная таблица), а через сотни мест (атрибуты тегов)

[@archieDeveloper]

@@SuprunAlexey а если в большом проекте решили сделать редизайн кнопок, придётся все кнопки что-ли переделать? 😱

[@timurkash]

говорится как тэйлвинд, а не тэйлвайнд

[@lazylion8379]

А я читаю это как таилвинд

[@НиколайМорозов-ы1э]

Ппц, очень важно как это читается

[@ЕвгенийМедонин]

Ты бы сравнил с bootstrap 5, там много утилити классов и их можно генерировать, так же там есть PurgeCSS

[@toyotominashimoto9963]

Годный видос! Благодарю. Стоит выучить тайлвинд в будущем. А тебя попрошу снять отдельный подробный видос-урок по gridcss:)

[@SuprunAlexey]

Спасибо. Та снимал уже раз 10

[@toyotominashimoto9963]

А, понял.

[@ИванПахомов-т6о]

Спасибо, давно искал нечто подобное.

[@SuprunAlexey]

Класс

[@АрсенийСпирин-ъ2т]

Такое себе, если честно. В style не проще ли прописывать в таком случае?

[@4493005]

Спасибо, прямо сегодня попробуем

[@SuprunAlexey]

Отлично, напишите сюда потом впечатления

[@zefirthefear9490]

не было , нет и не будет ничего лучше, чем ручками самому писать.

[@SuprunAlexey]

Может быть

[@iamname8758]

Да но это время, а чем быстрее верстальщик верстает тем лучше, далеко не всех заказчиков интересует, уникальная ручная вёрстка) Тут сайт за 2 часа накидать можно, а так бы в ручную, возможно и все 5-6 убил бы

[@SuprunAlexey]

@@iamname8758 смотря какие цели

[@yuriyovdeyev685]

@@iamname8758 Ага, потом с таким сайтам обращаются - а что-то наш сайт в лайтхаусе в красной зоне. А оказывается там разработчик сэкономил себе время, сверстал все на каком-то говнофреймворке + навешла jquery и еще кучу его плагинов.

[@yuriyovdeyev685]

Совершенно точно. Как перешел на полностью ручное написание с нуля кода, кроме сетки + ванильный JS (и его небольшие мини-либы для разных частей функционала) и выпилил jQuery - так сразу сайты стали попадать в зеленую зону в новом движке лайтхауса в пейджспид.

[@marinaermilova7912]

Привет, мне понравилось, пойду пробовать. Спасибо

[@SuprunAlexey]

Это самое главное

[@PassintoEurope]

Что-то не понятная тема. Если вы постоянно работаете с вёрсткой и дизайном, в чём проблема уже собрать свою библиотеку ? Зачем нужны все эти бутстрапы и т.д. кроме как для прототипирования? Есть Flexbox, есть JS, есть SmartGrid (от Лаврика) и с этим набором можно делать всё что хочешь. Зачем придумывать себе боль и страдания переписывая кучу классов в бутстрапе или тэилвинд?

[@artyomvashkevich602]

Ну да. Удобная штука. Но вот я прочитав комментарии и вправду лучше бы еще добавил возможность замены простыни классов на один какой-то свой класс. Это было бы точно удобнее. Хотя если использовать react vie или svelte, то по сути тут достаточно по сути один раз отредактировать в нужном стиле компаненты и затем использовать не чистый Tailwind, а уже дальше использовать стилезованные компаненты. Ну а так тучу классов писать так себе вариант. Но один раз написать можно конечно)))

[@kulakofft4]

Вообще не вижу никакой революции. "Соберём страничку за 2 минуты" - собрали в итоге на полтора компонента 100500 строк, из 100500 классов, которые (о чудо!) интуитивно понятны по названиям. Это получается нужно полезть в доку, посидеть там с полгода, чтобы более менее запомнить набор необходимых классов, чтобы потом писать из них простыню, в которой через полгода проекта (а может и раньше) сам чёрт ногу сломит при дебаге или рефакторинге.

[@olegpetrov2452]

Короче. После просмотра одного фрагмента. Вставляем css styles в виде атрибутов (классов) в html тег и вся новизна.

[@TahirKabilov]

не узкопрофильный фронт. но именно такой подход проще всего. в bulma нечто похожее. сам ловлю себя на том что вручную прописывал подобные классы типа my-.. py fs fw и прочее нежели создавать уникальные одноразовые классы

[@SuprunAlexey]

То то же

[@AlexAlex-sh3mz]

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

[@lllyx93]

Бутстрап тоже легко можно перекомпилировать, убрать ненужные компоненты, поменять ширину контейнера и тп

[@SuprunAlexey]

Везде можно

[@deniskadet]

Надо попробовать, Что-нибудь да сверстать на нем)

[@SuprunAlexey]

Попробуй, это легко

[@sashnevski]

Как bootstrap не нужен был, так и эта херня

[@danikmoroz2328]

100%

[@barrettM8]

Нужен для своих задач, как и любой другой инструмент. Иначе бы его не делали

[@frozeninside5004]

В закладки добавил, в деле пока использую материал и бутстрап5, Спасибо за альтернативу )

[@SuprunAlexey]

Очень хорошая альтернатива, присмотритесь

[@dennisfisher2684]

Ну.. Такое себе решение... После прихода флексов, перестал понимать, зачем нужен бутстрап? А на кой нужен css-фреймворк, не понимал никогда.

[@h2w..]

Создавать или модифицировать классы (для стилизации сайта) или делать inline html стиль для каждого экземпляра.Первый путь позволяет получить результат быстрее и код будет более читаемым.

[@ЕвгенийПавлович.Интернет-марке]

*Новый "интуитивно понятный интерфейс" для обычного пользователя.* С которым обычный пользователь не справится, а опытному, особо без надобности.

[@SuprunAlexey]

Ахах, справиться ещё как

[@danielkhachaturian]

ТэилВАЙНД , господи, спасите мои уши

[@DSDecay]

Такой подход - это извращение самой цели существования классов. Классы нужны для управления наборами свойств. А вот это - это именно то, что называется "плодить сущности". Далее. Дизайн "из коробки" (нелёгкой, к слову) tailwind годится разве что для безликих админок и кабинетов. Во всех остальных случаях всё равно пишут кастомный стиль, стараясь держать и html и css максимально чистым. Выпиливать всё лишнее из фреймворка - себе дороже, да и вообще глупо, мне кажется

[@SuprunAlexey]

Далеко не извращение

[@iloveyou-cb4ot]

не подскажите что за тема используется в видео для VisualCode?

[@СтасПлов]

Пишу сам по методологии БЭМ и меня все устраивает, ибо после БЭМ, фреймворки css кажутся дикостью

[@SuprunAlexey]

Каждому своё

[@tomitomion1179]

Похоже это больше заточено под SPA. В обычной верстке каждый раз прописывать кучу одинаковых классов одинаковым элементам такое себе. В условном React'е один раз прописал в компонент и используешь сколько влезет не парясь с css файлами, такое имеет смысл.

[@TheSadmint]

* tailwind [ˈteɪlwɪnd]

[@SuprunAlexey]

Ок ок

[@darkjudic]

да ладно, ещё скажи что не "сервайс" а "сервис ":)

[@marthtml]

ладно еще web приложение на реакт, vue где все грамотно настроено. Но вот мне пришлось переделывать 2 сайта обычных юзали tailwind, делали оочень долго, подбирая классы, рекорд был 20 классов для дива, какая боль потом это доводить до состаяния как в дизайне , эт Жэсть.). и все равно до дизайна и пиксельперферта в 95% как до луны..Во общем специфичный весьма инструмент, который нужно хорошо сначала настроить а дизайн должен еще для этого подходить. 700 кб вес css тока этого таилвинда..

[@p.rasskazov]

Лучший css фреймворк, и кастомизация, гибкие настройки, нет навязанных стилей (как бутстрап)... PS 5 дней обкатывал, пробовал его, просто бомба! Ничего что классов много, быстро и понятно зато

[@SuprunAlexey]

К классам привыкаешь максимально быстро

[@p.rasskazov]

@@SuprunAlexey то-то и оно

[@ДмитрийКузьмин-ш2с]

Бррратюнь все ОК но твой тэйлВАЙнд, мцц.... ой ну нимагу🤣🤣🤣 wind === вИнд || уИнд )) но эт всё херня лукаса за видос поставил!.😎😎😎

[@evstafyevandrew2198]

крутая утилита. Теперь только она. Жду выхода 2-ой версии её.

[@ravadik]

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

[@martingerman2457]

Ну что же автор, тебе это удалось - лови лайк! Пожелание - ну ты взялся за это, ну показал бы это не 9 минут, а скажем 19. Показал бы то, о чем говорил подробно на реальном макете. А тут... вжух вжух и в продашн. PS Nicepage - ты нам на него ссылку дал, а вот на самое главное нет... tailwindcss.com/

[@SuprunAlexey]

Та вот думаю может практику на нем запилить

[@AOne1999]

Спасибо!)

[@SuprunAlexey]

Всегда пожалуйста

[@HIghtowerSever]

Тэйлуинд, дружище (не тэйлуайнд). Так это произносится. Люблю этот фреймворк.

[@SuprunAlexey]

Уже все написали, ну бывает

[@HIghtowerSever]

@@SuprunAlexey . Так и есть. Сорян, поленился комменты почитать ;)

[@SuprunAlexey]

@@HIghtowerSever а вот стоило бы

[@DSDecay]

@@SuprunAlexey произносить правильно тоже стоило бы

[@Dreamvention]

[тэилвИнд] не [тэилвАИнд] а так супер! спасибо

[@SuprunAlexey]

Ага

[@АлексейЛевин-в6д]

А потом удивляются, почему страница 10 мегабайт весит...

[@IAM23]

"я захотел научиться верстать и попробовал бутстрап" - гениально, похлопаю

[@SuprunAlexey]

Громче хлопай, не слышу 😂

[@iamname8758]

Новичек на бустрапе может норм сайт своять, лучше так чем горе верстальщики которые на своих костылях флоатами верстали)

[@IAM23]

@@iamname8758 ага, естественно

[@olezhonnv3215]

@@iamname8758 Та че? Нормально флоатами получалось верстать. Я еще и таблицами верстал в нулевых - и нормально работало все. На то время -было отлично, свою задачу решало. И деньги зарабатывались.

[@aramharutyunyan5681]

А если использовать и Bootstrap и Tailwind одновременно?

[@SuprunAlexey]

Лажа

[@Aik-bu1yi]

Завтра заценю спс дядь

[@SuprunAlexey]

Класс, заценил?

[@ДмитрийОрлов-р5о]

Я считаю это ужасно, меня раздражает вереница классов, а ведь это только одна кнопка, а таких компонентов огромное множество, а ведь html не кешируется в большинстве случаев. Куда эффективнее описать стили кнопки/любого компонента в css и присвоить один, два класса

[@SuprunAlexey]

Ваше мнение имеет место быть

[@olezhonnv3215]

Some content

[@SuprunAlexey]

Неа, это уже плохо

[@hematogen50g]

Пойду выделю по группам все элементы вьюшки свой вебаппы и создам на js функцию для применения стиля. пронумерую стили от 0 до 9 и буду в поле класс вставлять просто цифру. А кто запретит))))

[@Den-08]

хорошее видео, хотелось бы только поправить что wind произносится как увинд, а не уаинд .

[@mymobigoogle205]

Блин. :) Пытаюсь слушать, но аж подпрыгиваю от тэил ВАЙНД. :) Как же мозг переключить на контент-то.

[@mymobigoogle205]

Ох. Не получилось полностью, но хоть как-то... Ладно, лайк все равно поставил. :)

[@Number-iu5wr]

Я лучше стилизую адаптивность без каких-либо фреймворкор с помощью grid технологии + ещё адаптивность блоков, шрифтов и прочее реализую с помощью calc()

[@Д-рВедьмак]

Не убедил Все тоже примерно с той же скоростью можно сделать и на бутстрапе и учить не нужно все эти специфичные классы. Да, интуитивные имена, но и в бутстрапе тоже. Для профи, вероятно найдется множество преимуществ у этой альтернативы, но новичку проще стартовать с бутстрапа. ИМХО

[@nto-i7h]

Что, блядь не так с теми разработчиками, которые в 2020 используют бутстрап и аналогичную хрень?

[@seeall2845]

Какой смысл в tailwind, этот framework ухудшает читабельность , потом код просто становиться хламом. Все должно быть раздельно , стили в файлах scss ,компоненты в jsx. Нет никакого диссонанса в коде , все должно быть просто и понятно !!!!!!!!!!!

[@stanislavshink]

Если на условном лендинге есть 8 кнопок одинакового стиля, и через неделю заказчик захочет поменять цвет, придется все 8 кнопок искать и в каждой менять класс)))

[@SuprunAlexey]

У вас бывало хоть раз такое в вашей практике?

[@stanislavshink]

Был случай, когда клиент попросил поменять колорсхему сайта( был салатовый, на более темный). Тогда мне пришлось бы каждый элемент сайта отдельно менять..

[@chudickgumanoid]

@@stanislavshink можно было использовать переменные цветов, и не заморачиваться

[@sharkman6434]

@@chudickgumanoid что и есть намба уан в вёрстке кстати - даже норм фигмы дают с отдельными страничками гед прописаны фонты кнопки цвета - сразу создаешь себе вариэблс и там всё прописываешь и погнали

[@gorodiskykirill4193]

Как поисковик реагирует на такую перегруженность классов?

[@ВладимирАнтонович-п9д]

Поисковик реагирует на поведенческие факторы остальное изжитки прошлого

[@SuprunAlexey]

Та отлично

[@7ZazmaZ7]

@@ВладимирАнтонович-п9д схренали изжитки прошлого

[@NaShSoundS]

Плакал твой БЭМ ;p

[@SuprunAlexey]

Ага

[@jackdoe1312]

Sass лучше, миксины удобные, предсказуемые, как и переменные + js выражения в них. А html не забит лишним мусором. Это все особо важно при работе с большой тройкой Vue, React, Angular, где есть компонентный подход.

[@iamname8758]

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

[@SuprunAlexey]

Неплохо

[@aleksandryushka9571]

Я заморачивайся качая не .min,а обычный .css, проще и больше гибкости модернизировать классы бутстрапа. Если эта библиотека сама удаляет, то это прям супер ускорение. Буду пробовать. Автору респект за все, что он для нас делает.

[@MrSlavjon]

Использую сетку bootstrap и всё. Остальное ручками... "никакого неиспользуемого css"

[@sysoev-dev]

хуяк хуяк и в продакшн ))

[@SuprunAlexey]

Многие так и делают

[@diterbolen9301]

В Pinegrow есть визуальный Tailwind редактор, там вообще все на лету делается

[@SuprunAlexey]

Дааа

[@zloy_tushkanchik]

Настоящие суровые верстальщики не используют фреймворки))

[@serhiichernyshov7172]

сравни плиз со smirtgrid который в чем то обошел Bootstrap

[@SuprunAlexey]

Посмотрим

[@ВладикКоваль]

Все новое - это хорошо забытое старое : привет атрибут style ...

[@SuprunAlexey]

Вы не поняли суть

[@evgeniybudaev1690]

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

[@qobilruzmatov48]

Nice good

[@SuprunAlexey]

Awesome

[@АндрейИльячов]

Бить по рукам всех тех, кто ради того, чтобы "попробовать очередной хайп" тащит всякие фантазии сумасшедшего вроде tailwind, которые не знаю где могут и подойти. Склипать быстро сайтец, как на примере с видео, чтобы потом отдать заказчику и он был недорабатываемым? А может в реакт приложении накидать кучу нечитабельного кода? А может на чистом html/css, дабы это было совершенно невозможно дебажить? Инкапсуляции CSS? Не слышали. Штука удобная при первом использовании, но бесполезная и бесперспективная, особенно для крупных проектов

[@RomanMikhailovich]

Так понимаю, разработчики tailwindcss вдохновлялись методологией atomic css

[@SuprunAlexey]

Частично

[@lemuriecnoname]

А можно классы выводить в отдельные файлы с применением имен? Чтобы если придется корректировать не делать это в 500 местах

[@SuprunAlexey]

Можно даже делать компоненты

[@Mentallitet]

Bootstrap лучше всё равно)

[@sashatv138]

Вы, наверное, так и не научились пользоваться CSS? Правильно я полагаю?

[@SuprunAlexey]

Та нет

[@sashatv138]

@@SuprunAlexey Вы же понимаете, что использование любых фреймворков CSS на постоянной основе, означает, что человек, при условии что он знал хоть чуть-чуть CSS, просто забывает что там и как. А судя по Вашим словам, Вы начали с фрейворков. Отсюда логический вывод - Вы НЕ знаете CSS. Проще один изучить CSS, чем постоянно мучить себя поисками "нового", "лучшего" и т.д. фреймворка. Ну разве я не прав?

[@dmitrydzimbo8297]

@@sashatv138 не прав. позже поймёшь;)

[@sashatv138]

@@dmitrydzimbo8297 пойму что? Что Вы уже забыли что такое CSS или что я не прав?

[@vataRF]

хм....сначало обрадовался....поюзал приложухи и растроился......

[@kickindaflow7888]

? этим все сказано

[@SuprunAlexey]

Это что

[@TheFryOS]

Расшифруй

[@nissssad]

@@SuprunAlexey мол указал, что Nicepage из описания и начала ролика - это реклама. Хотя это и так понятно

[@SuprunAlexey]

Очевидное невероятно

[@Aik-bu1yi]

И как сделать сложное меню с выпадающими списками ?

[@SuprunAlexey]

Компоненты даже есть , tailblocks

[@BigedEd]

Произносится tālˌwind - попутный ветер

[@ramizqurbanli]

tailwind.css 👍👍👍

[@SuprunAlexey]

👏🏻👏🏻👏🏻👏🏻👏🏻

[@L-Lesiv]

а что с разметкой и адаптивностью?

[@SuprunAlexey]

Все прекрасно

[@arsenmanasuev4934]

Мой товарищ начинающий бэк достал этим твиндом. В верстке совсем не шарит и пользует эти фреймворки. И проблема в том что он не знает нормально работу флоу и стилей и это приводит к крепким завтыкам. Видя его разметку меня в дрожь кидает. Это еще раз наводит на мысль о том что в начале нужно бы знать основы а не бездумно пользовать фреймворки. Да я понимаю это будет дольше чем если сразу использовать БС твинд но на выходе человек будет легко понимать как строить флоу и почему и как это все работает. И если вдруг завтра выйдет новый АТОМАРНЫЙ фреймворк то у людей знающих основы проблем не возникнет.

[@SuprunAlexey]

Я думаю все приходит с опытом, научится

[@arsenmanasuev4934]

@@SuprunAlexey Не разделяете мнение о том что взлет Tailwind обусловлен включением в Laravel ?. Мне проще такие вещи писать все же в ручную. А такие приспособы радуют в основном начинающих и вот таких ребят с бэка. А пуржить можно и просто использовав плагины на галп или вебпаком(понимаю что не будет такой эффект как если бы было на Tailwind написано). Правды ради должен отметить что есть интересные идеи в Tailwind. Но думаю что все же заглохнет и он.

[@yuriyovdeyev685]

Какая гадость, какая гадость этот ваш заливной тэйлвинд. Это же worst practices в чистом виде. Ровно один пример: у вас есть скажем компонент ну типа Заголовок кастомно оформленный, который используется по всему проекту в десятках мест. Часть из которых могут быть в файлах шаблона, часть где-то в админке, в БД. И нужно его подправить - задача совершенно банальная и типовая. Вот с этим говнофреймворком это превратиться просто в АД. Попросту говоря набор костылей, на этот код потом смотреть без слез нельзя, а кроме того это и увеличивает время разбора css правил при парсинге html. Я уж не говорю о поддержке такого кода. Вижу ровно одно место его применения - прототипирование, где-нибудь подальше от глаз людских, и уж точно не продакшене. Маздай и есть маздай. Популярен он ровно потому, почему и популярен бутстрап - люди ленивы и не хотят писать нормальный минималистичный, но семантически понятный код, это же не тяп-ляп и готово. И он определенно хуже бутстрапа в этом плане ибо делает из кода помойку. Почти тоже самое что и инлайн стили - а по сути оно и есть, только называется иначе. Тоже мне изобрели инновационный фреймворк.

[@diterbolen9301]

Вы что для каждого проекта все пишите с нуля? И кто вам только деньги за такое извращение платит?

[@yuriyovdeyev685]

@@diterbolen9301 В последнее время да, как гугль поменял алгоритм расчета метрик в лайтхаусе в конце мая. Тогда почти всей сайты резко просели по показателям скорости. Извращение использовать фреймворки там где это не нужно и часто просто вредно. Фреймворки годятся для админок и прототипирования, но не более. А писать с нуля это не так сложно как кажется, когда постоянно это делаешь. А главное минималистично, аккуратно и все это работает реактивно. В качестве базы использую только модернезированную под себя smart-grid сетку от Лаврика, которая сделана на less. А экономия работы для разработчика часто вылазит боком потом для клиента.

[@yuriyovdeyev685]

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

[@olezhonnv3215]

@@diterbolen9301 Я, бывает, пишу с нуля - платят деньги. Я же решаю поставленную задачу. Можно CSS и без фреймворков написать - это быстро и легко делается. Та и любой фреймворк CSS - учится за вечер, если надо. Я с Bootstrap разобрался быстро, коогда на Opencart интернет магазин взялся доделывать. Не знал ни бутстрапа, ни опенкарта до этого толком. Разобрался без проблем, задачи решил - деньги получил. Надо будет, и с этим Тейлвайндом разберусь без проблем. Если встретится на моем пути.

[@andreigunderin]

А в чем отличие от Atomic CSS ?

[@SuprunAlexey]

Если честно не шарю за атомик

[@poul2008]

По сути атомарный css

[@SuprunAlexey]

В лучшем виде

[@inzoddex8312]

Давно использую tailwind и просто ору с тех "умников" которые пишут, что дофига классов писать, что проще в css обычном кодить. Эти два слова я посвящаю вам - postcss и @apply. Прочитайте про них, что такое и как юзать, а уже потом орите в комментах.

[@Name-fn5hc]

Но на рынке Bootstrap востребованный шейчас.

[@SuprunAlexey]

Это да

[@VitaliyHAN]

Пожалуйста, перед записью видео проверьте правильность произношения английских слов. 20 секунд времени и на всем ролике правильное произношение, а не вот это вот все. Wind - ветер. Читается как Уинд. Tailwind - попутный ветер.

[@OlegKolisnyk]

Ну вообще-то Bootstrap 4 тоже utility-first. А так да, за счет большего количества утилит Tailwind гораздо гибче. Июль и август работал над проектами с ним, и вот сейчас пришлось доделывать проект с Bootstrap, так это небо и земля. Главное помнить, что при использовании Tailwind шаблонизаторы становятся не прихотью, а необходимостью.

[@vitek8137]

Не нравятся эти Фреймворки из-за нагромождение. Мб только я так думаю

[@PavelPirogov]

antd норм

[@SuprunAlexey]

Каждому своё

[@kulakofft4]

херня недопиленая))) куча пропсов, которые мер пойми зачем, за то важных пропсов нет, в доке дыры, в стилях тоже

[@danielluko7635]

За неделю освоить и сделать красивый сайт? кхе, это наверно криво и косо типо лендинг сворганить без БЭМ, препроцессоров и особого опыта в верстке flex и grid. Bootstrap вообще не понимаю зачем, там же всё очень шаблонно, а если захочешь немного переделать шаблон то придется переопределять куча стилей, легче самому уже сделать компонент а не брать шаблон с сайта

[@ShoHorosho]

и это в мусор, и бутстрап.... только ванила, только хардкор

[@SuprunAlexey]

Все в мусор !!

[@olezhonnv3215]

Поддерживаю!

[@PacoOfficial]

7:47 этот инструмент явно не для верстальщиков.. зас**ать HTML кучей классов... для любого опытного верстальщика - это г**но код. для ленивых бэкэндеров? может и норм, как и бутстрап, с готовыми элементами, но не для верстальщика. я люблю когда код выглядит красиво, имеет хорошую навигацию, а когда я вижу это 7:47, ну такое себе) я лучше сам опишу эту секцию: __list, __item, __title, __text, __link и т.д а потом в CSS добавлю нужное оформление по макету в фигме. просто и выглядит красиво. а не это убожество с 20 классами.. хз почему он на хайпе сейчас, как и с бутстрапом - тупое повторение, а самое смешное когда я спрашиваю у заказчиков, зачем вам нужен бутстрап или ещё какой то инструмент?)) они не знают что ответить, ибо сами не понимают для чего он нужен. просто услышали что есть такой инструмент и всё. все мы конечно когда то использовали бутстрапы и прочее, ибо не умели верстать, но когда появились флексы и ушли флоаты, все это стало лишним, ты лишь только становишься зависим, загоняешь себя в рамки. мб я конечно не прав, сколько людей столько и мнений, но у меня есть свое, и нужно наверное попробовать, но видя такой HTML даже пробовать не хочется, просто желание отпадает, хотя и слышал, что там через CSS можно инклюдить свойства, но смысл, не понимаю, в препроцессорах это тоже можно делать, как то так...

[@АндрейСтепаненко-о5х]

Подскажи тогда кто норм учит чтоб стать именно верстальщиком,я тоже считаю что шедевр могут создать только руки и ум человека а не машины,конструктора

[@PacoOfficial]

@@АндрейСтепаненко-о5х HTML Academy. Можно найти их старые курсы, года так 2018-2020, вот они были очень даже не плохие

[@АндрейСтепаненко-о5х]

@@PacoOfficial спасибо тебе большое,жму руку,удачи!

[@ikorjefocur]

Как и bootstrap, это для новичков. Странно видеть, что его на серьёзе использует человек с 8-ми летним опытом разработки. Чел, ты просто перестал развиваться. Советую поменять место работы.

[@SuprunAlexey]

Откуда такие выводы?

[@GreenHappyHelix]

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

[@SuprunAlexey]

Хотелось показать более для обширной аудитории, не все бы поняли суть с реактом

[@yuriikilyk8923]

Видео я посмотрю но мне как-то удобней на чистом CSS с использованием плагина Emet там припроцесоры SCSS для меня это всё бред... Я какой-то клас для обэкта сделал за 1 минуту и сделал так как мне удобно и всё... А то учи наново какие-то классы мы со временем хотим упростить такие простые вещи до такой степени что даже не чувствуем кайф от того что ты имеешь сили и ума делаешь что-то тежолое и другие это оценивают...

[@SuprunAlexey]

Дело привычки