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

  Рет қаралды 54,207

Web Developer Blog

Web Developer Blog

Күн бұрын

Пікірлер: 281
@vanibron
@vanibron 4 жыл бұрын
Я работаю в команде, которая использовала tailwind уже на нескольких крупных проектах на Next.js. В конечном счете можно сказать, что подход себя оправдал. В случае с использованием React-компонентов становится неважно, сколько раз у тебя повторяются классы и прочие моменты, актуальные для простого HTML. Если речь идет о кнопке, то она все равно объявлена один раз, и меняется что-то в одном месте. К тому же конфиг tailwind позволяет лепить из фреймворка что угодно. Конечно те же CSS modules дают гораздо больше свободы, и с tailwind приходится порой как следует изголятся. Но со временем стало ясно, что в итоге работа над проектами пошла быстрее. Сравнивать tailwind с бутстрапом смысла нет, кстати. Bootstrap - набор компонентов, tailwind - набор утилит (хотя компоненты там тоже можно легко создавать). В общем, инструмент однозначно не на любой случай - когда я просто верстаю лендинг, например, я по-прежнему использую BEM. Но вот в разработке на React все чаще обращаюсь к tailwind.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Хотел отдельно снять про реакт, спасибо за комментарий !
@Tora20112
@Tora20112 3 жыл бұрын
Подскажите, пожалуйста, а как быстро поменять цвет кнопки, если класс *-red жестко прописан, а нужно поменять на синий, каждый шаблон менять? В BS можно переопределить класс bnt-primary например и т.д.
@vanibron
@vanibron 3 жыл бұрын
@@Tora20112 В конфиге можно создать такие же классы, как в bootstrap, например, и назначить им произвольные стили. BS и TW используют разные подходы по умолчанию, но TW дает возможность переопределить конфиг так, как заблагорассудится, удалив все значения по умолчанию. Вот пример из документации, как вместо названий цветов использовать условные термины primary, secondary и т.п. tailwindcss.com/docs/customizing-colors#naming-your-colors
@OnlyLuck1000
@OnlyLuck1000 3 жыл бұрын
A chakra-ui не пробовали?
@vanibron
@vanibron 3 жыл бұрын
@@OnlyLuck1000 Не пробовали, и насколько я вижу, это система компонентов в духе ant.design, например. Это разные вещи. Tailwind упрощает работу со стилями и только.
@МаксимМакаров-к8б
@МаксимМакаров-к8б 4 жыл бұрын
Я не совсем понимаю подход tailwind. С тем же успехом можно начать писать в атрибуте style. Посмотрите на крупные проекты. Там такой подход не приживается от слова "совсем". Все стремятся к изоляции стилей компонентов вместо замешивается их в одно поле из 600-800 классов. Потому что иначе вы не сможете масштабировать процесс разработки на большее количество кодеров. Tailwind это про быстрое прототипирование, которое надо выпиливать из проекта сразу как на нем появляется третий разработчик.
@bytemusic7737
@bytemusic7737 2 жыл бұрын
директива @apply в помощь
@eduardomavlyutov4710
@eduardomavlyutov4710 2 жыл бұрын
Аминь!
@grammidin
@grammidin 4 жыл бұрын
Вместо двух классов написать десять. Действительно, удобно. И ни фига не запутаешься в них.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Не запутаешься
@slprime-old
@slprime-old 4 жыл бұрын
@@SuprunAlexey ага, прикольный будет квест когда нужно будет немного изменить дизайн primary кнопки во всём портале.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Весело
@vasil-vasil
@vasil-vasil 4 жыл бұрын
@@slprime-old так у них классы будут одинаковы?! Нет?
@shvarts95
@shvarts95 4 жыл бұрын
Мне вообще эта тенденция не нравится, ради изменения цвета кнопки лезть в html и добавлять класс, вместо того чтобы сделать это в css, очень напоминает те времена когда стилизация делалась через атрибуты в html
@vladislavsk5228
@vladislavsk5228 4 жыл бұрын
Бредняк писать у тегов миллион классов что бы заменить примерно такое же количество стилей.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Тут важен сам подход, чуть позже поймёте
@tr0yka
@tr0yka 4 жыл бұрын
я работал с чем-то подобным. С одной стороны немного проще и быстрее делать прототипы. Но с другой....Куча мусора в коде.
@Владислав-э9щ5ф
@Владислав-э9щ5ф 3 жыл бұрын
Меня всегда отпугивали готовые решения для css, так как все эти готовые решения всё-таки заставлют вникать в них. Из этого следует, что ты вместо того, чтобы понять как все работает, запоминаешь имена классов, что не совсем хорошо, так как дизайны проектов по ним тупо не бьют. Поход всех этих готовых решений подходит только под внутренние проекты, которым нужен в основном функционал, а текущий канал рассказывает в основном, как верстать, а не писать фронтенд.
@maxk.9302
@maxk.9302 4 жыл бұрын
Спасибо за видео! Очень интересно;)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Спасибо
@ЕвгенийМедонин
@ЕвгенийМедонин 4 жыл бұрын
Ты бы сравнил с bootstrap 5, там много утилити классов и их можно генерировать, так же там есть PurgeCSS
@user-mk2fo7dh4f
@user-mk2fo7dh4f 4 жыл бұрын
Такое себе, если честно. В style не проще ли прописывать в таком случае?
@timurkash
@timurkash 3 жыл бұрын
говорится как тэйлвинд, а не тэйлвайнд
@lazylion8379
@lazylion8379 Жыл бұрын
А я читаю это как таилвинд
@НиколайМорозов-ы1э
@НиколайМорозов-ы1э Жыл бұрын
Ппц, очень важно как это читается
@nikghost3356
@nikghost3356 3 жыл бұрын
Довольно интересная штука. На первый взгляд это дико не удобно, но эта колбаса пишется один раз во время стилизирования элемента. Потом просто заменяем классом, куда через @apply bg-gray-500 px-2 hover:bg-red-100 пихаем всю колбасу и забываем.
@ПавелСедой-р5п
@ПавелСедой-р5п 4 жыл бұрын
Нужно протестировать, интересно, хотя не являюсь сторонником фреймворков. Спасибо за видео.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Попробовать всегда можно
@МаксимДубенко-в4т
@МаксимДубенко-в4т 4 жыл бұрын
То есть, почти то же самое, что и с использованием атрибута "Style" в html
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Попробуйте и сравните количество символов прописанных
@МаксимДубенко-в4т
@МаксимДубенко-в4т 4 жыл бұрын
@@SuprunAlexey По поводу кол-ва символов - да. Самому приходила идея, чтоб в названиях классов за основу были взяты сокращения, как в Emmet(если не ошибаюсь) В общем, чтоб максимально коротко
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
@@МаксимДубенко-в4т ну вот :)
@borisoffdenis
@borisoffdenis 4 жыл бұрын
@@SuprunAlexey Смысл не в количестве симловов, в негибкости подхода. Ось изменений проходит не через одну точку (каскадная таблица), а через сотни мест (атрибуты тегов)
@archieDeveloper
@archieDeveloper 4 жыл бұрын
@@SuprunAlexey а если в большом проекте решили сделать редизайн кнопок, придётся все кнопки что-ли переделать? 😱
@PassintoEurope
@PassintoEurope 4 жыл бұрын
Что-то не понятная тема. Если вы постоянно работаете с вёрсткой и дизайном, в чём проблема уже собрать свою библиотеку ? Зачем нужны все эти бутстрапы и т.д. кроме как для прототипирования? Есть Flexbox, есть JS, есть SmartGrid (от Лаврика) и с этим набором можно делать всё что хочешь. Зачем придумывать себе боль и страдания переписывая кучу классов в бутстрапе или тэилвинд?
@ITentrepreneur
@ITentrepreneur 4 жыл бұрын
Наверное повторю уже многих вышеотписавшихся, но тут придётся учить дополнительную прослойку классов CSS на самим CSS. Истину уже давно выяснили - для админки или мало посещаемого сайта можешь тянуть хоть километр библиотек и фреймворков, но для прода будь добр использовать только самые нужные, необходимые стили.
@toyotominashimoto9963
@toyotominashimoto9963 4 жыл бұрын
Годный видос! Благодарю. Стоит выучить тайлвинд в будущем. А тебя попрошу снять отдельный подробный видос-урок по gridcss:)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Спасибо. Та снимал уже раз 10
@toyotominashimoto9963
@toyotominashimoto9963 4 жыл бұрын
А, понял.
@4493005
@4493005 4 жыл бұрын
Спасибо, прямо сегодня попробуем
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Отлично, напишите сюда потом впечатления
@ИванПахомов-т6о
@ИванПахомов-т6о 4 жыл бұрын
Спасибо, давно искал нечто подобное.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Класс
@kulakofft4
@kulakofft4 3 жыл бұрын
Вообще не вижу никакой революции. "Соберём страничку за 2 минуты" - собрали в итоге на полтора компонента 100500 строк, из 100500 классов, которые (о чудо!) интуитивно понятны по названиям. Это получается нужно полезть в доку, посидеть там с полгода, чтобы более менее запомнить набор необходимых классов, чтобы потом писать из них простыню, в которой через полгода проекта (а может и раньше) сам чёрт ногу сломит при дебаге или рефакторинге.
@dennisfisher2684
@dennisfisher2684 4 жыл бұрын
Ну.. Такое себе решение... После прихода флексов, перестал понимать, зачем нужен бутстрап? А на кой нужен css-фреймворк, не понимал никогда.
@zefirthefear9490
@zefirthefear9490 4 жыл бұрын
не было , нет и не будет ничего лучше, чем ручками самому писать.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Может быть
@iamname8758
@iamname8758 4 жыл бұрын
Да но это время, а чем быстрее верстальщик верстает тем лучше, далеко не всех заказчиков интересует, уникальная ручная вёрстка) Тут сайт за 2 часа накидать можно, а так бы в ручную, возможно и все 5-6 убил бы
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
@@iamname8758 смотря какие цели
@yuriyovdeyev685
@yuriyovdeyev685 4 жыл бұрын
@@iamname8758 Ага, потом с таким сайтам обращаются - а что-то наш сайт в лайтхаусе в красной зоне. А оказывается там разработчик сэкономил себе время, сверстал все на каком-то говнофреймворке + навешла jquery и еще кучу его плагинов.
@yuriyovdeyev685
@yuriyovdeyev685 4 жыл бұрын
Совершенно точно. Как перешел на полностью ручное написание с нуля кода, кроме сетки + ванильный JS (и его небольшие мини-либы для разных частей функционала) и выпилил jQuery - так сразу сайты стали попадать в зеленую зону в новом движке лайтхауса в пейджспид.
@marinaermilova7912
@marinaermilova7912 4 жыл бұрын
Привет, мне понравилось, пойду пробовать. Спасибо
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Это самое главное
@artyomvashkevich602
@artyomvashkevich602 2 жыл бұрын
Ну да. Удобная штука. Но вот я прочитав комментарии и вправду лучше бы еще добавил возможность замены простыни классов на один какой-то свой класс. Это было бы точно удобнее. Хотя если использовать react vie или svelte, то по сути тут достаточно по сути один раз отредактировать в нужном стиле компаненты и затем использовать не чистый Tailwind, а уже дальше использовать стилезованные компаненты. Ну а так тучу классов писать так себе вариант. Но один раз написать можно конечно)))
@kyberplay4361
@kyberplay4361 3 жыл бұрын
Вродь нормуль css фрейм. Пасиба =). Попробую применить в проекте).
@olegpetrov2452
@olegpetrov2452 4 жыл бұрын
Короче. После просмотра одного фрагмента. Вставляем css styles в виде атрибутов (классов) в html тег и вся новизна.
@danielkhachaturian
@danielkhachaturian 3 жыл бұрын
ТэилВАЙНД , господи, спасите мои уши
@tomitomion1179
@tomitomion1179 4 жыл бұрын
Похоже это больше заточено под SPA. В обычной верстке каждый раз прописывать кучу одинаковых классов одинаковым элементам такое себе. В условном React'е один раз прописал в компонент и используешь сколько влезет не парясь с css файлами, такое имеет смысл.
@AlexAlex-sh3mz
@AlexAlex-sh3mz 3 жыл бұрын
Я раньше использовал кастомайзеры для бс, потом сас, теперь я использую тайлвинд это реально удобно причем а настройках его можно менять как угодно, размер контейнера или цвета
@СтасПлов
@СтасПлов 4 жыл бұрын
Пишу сам по методологии БЭМ и меня все устраивает, ибо после БЭМ, фреймворки css кажутся дикостью
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Каждому своё
@ДмитрийОрлов-р5о
@ДмитрийОрлов-р5о 4 жыл бұрын
Я считаю это ужасно, меня раздражает вереница классов, а ведь это только одна кнопка, а таких компонентов огромное множество, а ведь html не кешируется в большинстве случаев. Куда эффективнее описать стили кнопки/любого компонента в css и присвоить один, два класса
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Ваше мнение имеет место быть
@АлексейЛевин-в6д
@АлексейЛевин-в6д 2 жыл бұрын
А потом удивляются, почему страница 10 мегабайт весит...
@yuriyovdeyev685
@yuriyovdeyev685 4 жыл бұрын
Какая гадость, какая гадость этот ваш заливной тэйлвинд. Это же worst practices в чистом виде. Ровно один пример: у вас есть скажем компонент ну типа Заголовок кастомно оформленный, который используется по всему проекту в десятках мест. Часть из которых могут быть в файлах шаблона, часть где-то в админке, в БД. И нужно его подправить - задача совершенно банальная и типовая. Вот с этим говнофреймворком это превратиться просто в АД. Попросту говоря набор костылей, на этот код потом смотреть без слез нельзя, а кроме того это и увеличивает время разбора css правил при парсинге html. Я уж не говорю о поддержке такого кода. Вижу ровно одно место его применения - прототипирование, где-нибудь подальше от глаз людских, и уж точно не продакшене. Маздай и есть маздай. Популярен он ровно потому, почему и популярен бутстрап - люди ленивы и не хотят писать нормальный минималистичный, но семантически понятный код, это же не тяп-ляп и готово. И он определенно хуже бутстрапа в этом плане ибо делает из кода помойку. Почти тоже самое что и инлайн стили - а по сути оно и есть, только называется иначе. Тоже мне изобрели инновационный фреймворк.
@diterbolen9301
@diterbolen9301 4 жыл бұрын
Вы что для каждого проекта все пишите с нуля? И кто вам только деньги за такое извращение платит?
@yuriyovdeyev685
@yuriyovdeyev685 4 жыл бұрын
@@diterbolen9301 В последнее время да, как гугль поменял алгоритм расчета метрик в лайтхаусе в конце мая. Тогда почти всей сайты резко просели по показателям скорости. Извращение использовать фреймворки там где это не нужно и часто просто вредно. Фреймворки годятся для админок и прототипирования, но не более. А писать с нуля это не так сложно как кажется, когда постоянно это делаешь. А главное минималистично, аккуратно и все это работает реактивно. В качестве базы использую только модернезированную под себя smart-grid сетку от Лаврика, которая сделана на less. А экономия работы для разработчика часто вылазит боком потом для клиента.
@yuriyovdeyev685
@yuriyovdeyev685 4 жыл бұрын
@Дмитрий Самарин В этом практически очень мало смысла Такую сетку я и сам могу сделать или взять уже готовую у других, ничуть не хуже. Сетка это мизерная часть бутстрапа.
@olezhonnv3215
@olezhonnv3215 4 жыл бұрын
@@diterbolen9301 Я, бывает, пишу с нуля - платят деньги. Я же решаю поставленную задачу. Можно CSS и без фреймворков написать - это быстро и легко делается. Та и любой фреймворк CSS - учится за вечер, если надо. Я с Bootstrap разобрался быстро, коогда на Opencart интернет магазин взялся доделывать. Не знал ни бутстрапа, ни опенкарта до этого толком. Разобрался без проблем, задачи решил - деньги получил. Надо будет, и с этим Тейлвайндом разберусь без проблем. Если встретится на моем пути.
@frozeninside5004
@frozeninside5004 4 жыл бұрын
В закладки добавил, в деле пока использую материал и бутстрап5, Спасибо за альтернативу )
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Очень хорошая альтернатива, присмотритесь
@ravadik
@ravadik 4 жыл бұрын
Выглядит круто, только одна проблема, ко всему этому мусору потом JS подключить, зае**шься искать, особенно в готовом проекте который не ты делал
@sashnevski
@sashnevski 4 жыл бұрын
Как bootstrap не нужен был, так и эта херня
@danikmoroz2328
@danikmoroz2328 4 жыл бұрын
100%
@barrettM8
@barrettM8 3 жыл бұрын
Нужен для своих задач, как и любой другой инструмент. Иначе бы его не делали
@Den-08
@Den-08 2 жыл бұрын
хорошее видео, хотелось бы только поправить что wind произносится как увинд, а не уаинд .
@evstafyevandrew2198
@evstafyevandrew2198 3 жыл бұрын
крутая утилита. Теперь только она. Жду выхода 2-ой версии её.
@p.rasskazov
@p.rasskazov 4 жыл бұрын
Лучший css фреймворк, и кастомизация, гибкие настройки, нет навязанных стилей (как бутстрап)... PS 5 дней обкатывал, пробовал его, просто бомба! Ничего что классов много, быстро и понятно зато
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
К классам привыкаешь максимально быстро
@p.rasskazov
@p.rasskazov 4 жыл бұрын
@@SuprunAlexey то-то и оно
@h2w..
@h2w.. Жыл бұрын
Создавать или модифицировать классы (для стилизации сайта) или делать inline html стиль для каждого экземпляра.Первый путь позволяет получить результат быстрее и код будет более читаемым.
@lllyx93
@lllyx93 4 жыл бұрын
Бутстрап тоже легко можно перекомпилировать, убрать ненужные компоненты, поменять ширину контейнера и тп
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Везде можно
@AOne1999
@AOne1999 4 жыл бұрын
Спасибо!)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Всегда пожалуйста
@AntonYatsenkoRU
@AntonYatsenkoRU 4 жыл бұрын
Что, блядь не так с теми разработчиками, которые в 2020 используют бутстрап и аналогичную хрень?
@DSDecay
@DSDecay 3 жыл бұрын
Такой подход - это извращение самой цели существования классов. Классы нужны для управления наборами свойств. А вот это - это именно то, что называется "плодить сущности". Далее. Дизайн "из коробки" (нелёгкой, к слову) tailwind годится разве что для безликих админок и кабинетов. Во всех остальных случаях всё равно пишут кастомный стиль, стараясь держать и html и css максимально чистым. Выпиливать всё лишнее из фреймворка - себе дороже, да и вообще глупо, мне кажется
@SuprunAlexey
@SuprunAlexey 3 жыл бұрын
Далеко не извращение
@TahirKabilov
@TahirKabilov 4 жыл бұрын
не узкопрофильный фронт. но именно такой подход проще всего. в bulma нечто похожее. сам ловлю себя на том что вручную прописывал подобные классы типа my-.. py fs fw и прочее нежели создавать уникальные одноразовые классы
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
То то же
@deniskadet
@deniskadet 4 жыл бұрын
Надо попробовать, Что-нибудь да сверстать на нем)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Попробуй, это легко
@ДмитрийКузьмин-ш2с
@ДмитрийКузьмин-ш2с 3 жыл бұрын
Бррратюнь все ОК но твой тэйлВАЙнд, мцц.... ой ну нимагу🤣🤣🤣 wind === вИнд || уИнд )) но эт всё херня лукаса за видос поставил!.😎😎😎
@TheSadmint
@TheSadmint 4 жыл бұрын
* tailwind [ˈteɪlwɪnd]
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Ок ок
@darkjudic
@darkjudic 4 жыл бұрын
да ладно, ещё скажи что не "сервайс" а "сервис ":)
@seeall2845
@seeall2845 Жыл бұрын
Какой смысл в tailwind, этот framework ухудшает читабельность , потом код просто становиться хламом. Все должно быть раздельно , стили в файлах scss ,компоненты в jsx. Нет никакого диссонанса в коде , все должно быть просто и понятно !!!!!!!!!!!
@ЕвгенийПавлович.Интернет-марке
@ЕвгенийПавлович.Интернет-марке 4 жыл бұрын
*Новый "интуитивно понятный интерфейс" для обычного пользователя.* С которым обычный пользователь не справится, а опытному, особо без надобности.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Ахах, справиться ещё как
@marthtml
@marthtml 4 жыл бұрын
ладно еще web приложение на реакт, vue где все грамотно настроено. Но вот мне пришлось переделывать 2 сайта обычных юзали tailwind, делали оочень долго, подбирая классы, рекорд был 20 классов для дива, какая боль потом это доводить до состаяния как в дизайне , эт Жэсть.). и все равно до дизайна и пиксельперферта в 95% как до луны..Во общем специфичный весьма инструмент, который нужно хорошо сначала настроить а дизайн должен еще для этого подходить. 700 кб вес css тока этого таилвинда..
@IAM23
@IAM23 4 жыл бұрын
"я захотел научиться верстать и попробовал бутстрап" - гениально, похлопаю
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Громче хлопай, не слышу 😂
@iamname8758
@iamname8758 4 жыл бұрын
Новичек на бустрапе может норм сайт своять, лучше так чем горе верстальщики которые на своих костылях флоатами верстали)
@IAM23
@IAM23 4 жыл бұрын
@@iamname8758 ага, естественно
@olezhonnv3215
@olezhonnv3215 4 жыл бұрын
@@iamname8758 Та че? Нормально флоатами получалось верстать. Я еще и таблицами верстал в нулевых - и нормально работало все. На то время -было отлично, свою задачу решало. И деньги зарабатывались.
@sysoev-dev
@sysoev-dev 4 жыл бұрын
хуяк хуяк и в продакшн ))
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Многие так и делают
@martingerman2457
@martingerman2457 4 жыл бұрын
Ну что же автор, тебе это удалось - лови лайк! Пожелание - ну ты взялся за это, ну показал бы это не 9 минут, а скажем 19. Показал бы то, о чем говорил подробно на реальном макете. А тут... вжух вжух и в продашн. PS Nicepage - ты нам на него ссылку дал, а вот на самое главное нет... tailwindcss.com/
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Та вот думаю может практику на нем запилить
@iloveyou-cb4ot
@iloveyou-cb4ot 3 жыл бұрын
не подскажите что за тема используется в видео для VisualCode?
@diterbolen9301
@diterbolen9301 4 жыл бұрын
В Pinegrow есть визуальный Tailwind редактор, там вообще все на лету делается
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Дааа
@Dreamvention
@Dreamvention 3 жыл бұрын
[тэилвИнд] не [тэилвАИнд] а так супер! спасибо
@SuprunAlexey
@SuprunAlexey 3 жыл бұрын
Ага
@hematogen50g
@hematogen50g 3 жыл бұрын
Пойду выделю по группам все элементы вьюшки свой вебаппы и создам на js функцию для применения стиля. пронумерую стили от 0 до 9 и буду в поле класс вставлять просто цифру. А кто запретит))))
@АндрейИльячов
@АндрейИльячов Жыл бұрын
Бить по рукам всех тех, кто ради того, чтобы "попробовать очередной хайп" тащит всякие фантазии сумасшедшего вроде tailwind, которые не знаю где могут и подойти. Склипать быстро сайтец, как на примере с видео, чтобы потом отдать заказчику и он был недорабатываемым? А может в реакт приложении накидать кучу нечитабельного кода? А может на чистом html/css, дабы это было совершенно невозможно дебажить? Инкапсуляции CSS? Не слышали. Штука удобная при первом использовании, но бесполезная и бесперспективная, особенно для крупных проектов
@Aik-bu1yi
@Aik-bu1yi 4 жыл бұрын
Завтра заценю спс дядь
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Класс, заценил?
@Д-рВедьмак
@Д-рВедьмак Жыл бұрын
Не убедил Все тоже примерно с той же скоростью можно сделать и на бутстрапе и учить не нужно все эти специфичные классы. Да, интуитивные имена, но и в бутстрапе тоже. Для профи, вероятно найдется множество преимуществ у этой альтернативы, но новичку проще стартовать с бутстрапа. ИМХО
@Number-iu5wr
@Number-iu5wr 2 жыл бұрын
Я лучше стилизую адаптивность без каких-либо фреймворкор с помощью grid технологии + ещё адаптивность блоков, шрифтов и прочее реализую с помощью calc()
@MrSlavjon
@MrSlavjon 4 жыл бұрын
Использую сетку bootstrap и всё. Остальное ручками... "никакого неиспользуемого css"
@vitek8137
@vitek8137 6 ай бұрын
Не нравятся эти Фреймворки из-за нагромождение. Мб только я так думаю
@mymobigoogle205
@mymobigoogle205 2 жыл бұрын
Блин. :) Пытаюсь слушать, но аж подпрыгиваю от тэил ВАЙНД. :) Как же мозг переключить на контент-то.
@mymobigoogle205
@mymobigoogle205 2 жыл бұрын
Ох. Не получилось полностью, но хоть как-то... Ладно, лайк все равно поставил. :)
@zloy_tushkanchik
@zloy_tushkanchik 4 жыл бұрын
Настоящие суровые верстальщики не используют фреймворки))
@HIghtowerSever
@HIghtowerSever 4 жыл бұрын
Тэйлуинд, дружище (не тэйлуайнд). Так это произносится. Люблю этот фреймворк.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Уже все написали, ну бывает
@HIghtowerSever
@HIghtowerSever 4 жыл бұрын
@@SuprunAlexey . Так и есть. Сорян, поленился комменты почитать ;)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
@@HIghtowerSever а вот стоило бы
@DSDecay
@DSDecay 3 жыл бұрын
@@SuprunAlexey произносить правильно тоже стоило бы
@jackdoe1312
@jackdoe1312 3 жыл бұрын
Sass лучше, миксины удобные, предсказуемые, как и переменные + js выражения в них. А html не забит лишним мусором. Это все особо важно при работе с большой тройкой Vue, React, Angular, где есть компонентный подход.
@stanislavshink
@stanislavshink 4 жыл бұрын
Если на условном лендинге есть 8 кнопок одинакового стиля, и через неделю заказчик захочет поменять цвет, придется все 8 кнопок искать и в каждой менять класс)))
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
У вас бывало хоть раз такое в вашей практике?
@stanislavshink
@stanislavshink 4 жыл бұрын
Был случай, когда клиент попросил поменять колорсхему сайта( был салатовый, на более темный). Тогда мне пришлось бы каждый элемент сайта отдельно менять..
@chudickgumanoid
@chudickgumanoid Жыл бұрын
@@stanislavshink можно было использовать переменные цветов, и не заморачиваться
@sharkman6434
@sharkman6434 Жыл бұрын
@@chudickgumanoid что и есть намба уан в вёрстке кстати - даже норм фигмы дают с отдельными страничками гед прописаны фонты кнопки цвета - сразу создаешь себе вариэблс и там всё прописываешь и погнали
@NaShSoundS
@NaShSoundS 4 жыл бұрын
Плакал твой БЭМ ;p
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Ага
@serhiichernyshov7172
@serhiichernyshov7172 4 жыл бұрын
сравни плиз со smirtgrid который в чем то обошел Bootstrap
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Посмотрим
@Mentallitet
@Mentallitet 4 жыл бұрын
Bootstrap лучше всё равно)
@iamname8758
@iamname8758 4 жыл бұрын
Блин, когда увидел бутстрап, хотелось самому реализовать подобное, что была возможность удалять не используемые классы
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Неплохо
@aleksandryushka9571
@aleksandryushka9571 3 жыл бұрын
Я заморачивайся качая не .min,а обычный .css, проще и больше гибкости модернизировать классы бутстрапа. Если эта библиотека сама удаляет, то это прям супер ускорение. Буду пробовать. Автору респект за все, что он для нас делает.
@evgeniybudaev1690
@evgeniybudaev1690 4 жыл бұрын
С выходом флексов такие библиотеки как бутстрап и аналоги уже не актуальны в 2020году. Использование библиотеки приводит к уменьшению скорости загрузки приложения в целом. Сейчас все борются за производительность.
@olezhonnv3215
@olezhonnv3215 4 жыл бұрын
Some content
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Неа, это уже плохо
@lemuriecnoname
@lemuriecnoname 4 жыл бұрын
А можно классы выводить в отдельные файлы с применением имен? Чтобы если придется корректировать не делать это в 500 местах
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Можно даже делать компоненты
@RomanMikhailovich
@RomanMikhailovich 4 жыл бұрын
Так понимаю, разработчики tailwindcss вдохновлялись методологией atomic css
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Частично
@BigedEd
@BigedEd 3 жыл бұрын
Произносится tālˌwind - попутный ветер
@gorodiskykirill4193
@gorodiskykirill4193 4 жыл бұрын
Как поисковик реагирует на такую перегруженность классов?
@ВладимирАнтонович-п9д
@ВладимирАнтонович-п9д 4 жыл бұрын
Поисковик реагирует на поведенческие факторы остальное изжитки прошлого
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Та отлично
@7ZazmaZ7
@7ZazmaZ7 4 жыл бұрын
@@ВладимирАнтонович-п9д схренали изжитки прошлого
@vataRF
@vataRF 4 жыл бұрын
хм....сначало обрадовался....поюзал приложухи и растроился......
@aramharutyunyan5681
@aramharutyunyan5681 2 жыл бұрын
А если использовать и Bootstrap и Tailwind одновременно?
@SuprunAlexey
@SuprunAlexey 2 жыл бұрын
Лажа
@ВладикКоваль
@ВладикКоваль 4 жыл бұрын
Все новое - это хорошо забытое старое : привет атрибут style ...
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Вы не поняли суть
@dd-pe5dp
@dd-pe5dp 2 жыл бұрын
очередная хрень. Надо чтоб можно было нарисовать , а прога потом сама напишет теги - вот это было бы круто, а писать самому тэги и изучать документацию это геморой.
@sashatv138
@sashatv138 4 жыл бұрын
Вы, наверное, так и не научились пользоваться CSS? Правильно я полагаю?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Та нет
@sashatv138
@sashatv138 4 жыл бұрын
@@SuprunAlexey Вы же понимаете, что использование любых фреймворков CSS на постоянной основе, означает, что человек, при условии что он знал хоть чуть-чуть CSS, просто забывает что там и как. А судя по Вашим словам, Вы начали с фрейворков. Отсюда логический вывод - Вы НЕ знаете CSS. Проще один изучить CSS, чем постоянно мучить себя поисками "нового", "лучшего" и т.д. фреймворка. Ну разве я не прав?
@dmitrydzimbo8297
@dmitrydzimbo8297 3 жыл бұрын
@@sashatv138 не прав. позже поймёшь;)
@sashatv138
@sashatv138 3 жыл бұрын
@@dmitrydzimbo8297 пойму что? Что Вы уже забыли что такое CSS или что я не прав?
@Name-fn5hc
@Name-fn5hc 4 жыл бұрын
Но на рынке Bootstrap востребованный шейчас.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Это да
@kickindaflow7888
@kickindaflow7888 4 жыл бұрын
? этим все сказано
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Это что
@TheFryOS
@TheFryOS 4 жыл бұрын
Расшифруй
@nissssad
@nissssad 4 жыл бұрын
@@SuprunAlexey мол указал, что Nicepage из описания и начала ролика - это реклама. Хотя это и так понятно
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Очевидное невероятно
@qobilruzmatov48
@qobilruzmatov48 4 жыл бұрын
Nice good
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Awesome
@danielluko7635
@danielluko7635 Жыл бұрын
За неделю освоить и сделать красивый сайт? кхе, это наверно криво и косо типо лендинг сворганить без БЭМ, препроцессоров и особого опыта в верстке flex и grid. Bootstrap вообще не понимаю зачем, там же всё очень шаблонно, а если захочешь немного переделать шаблон то придется переопределять куча стилей, легче самому уже сделать компонент а не брать шаблон с сайта
@Aik-bu1yi
@Aik-bu1yi 4 жыл бұрын
И как сделать сложное меню с выпадающими списками ?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Компоненты даже есть , tailblocks
@arsenmanasuev4934
@arsenmanasuev4934 3 жыл бұрын
Мой товарищ начинающий бэк достал этим твиндом. В верстке совсем не шарит и пользует эти фреймворки. И проблема в том что он не знает нормально работу флоу и стилей и это приводит к крепким завтыкам. Видя его разметку меня в дрожь кидает. Это еще раз наводит на мысль о том что в начале нужно бы знать основы а не бездумно пользовать фреймворки. Да я понимаю это будет дольше чем если сразу использовать БС твинд но на выходе человек будет легко понимать как строить флоу и почему и как это все работает. И если вдруг завтра выйдет новый АТОМАРНЫЙ фреймворк то у людей знающих основы проблем не возникнет.
@SuprunAlexey
@SuprunAlexey 3 жыл бұрын
Я думаю все приходит с опытом, научится
@arsenmanasuev4934
@arsenmanasuev4934 3 жыл бұрын
@@SuprunAlexey Не разделяете мнение о том что взлет Tailwind обусловлен включением в Laravel ?. Мне проще такие вещи писать все же в ручную. А такие приспособы радуют в основном начинающих и вот таких ребят с бэка. А пуржить можно и просто использовав плагины на галп или вебпаком(понимаю что не будет такой эффект как если бы было на Tailwind написано). Правды ради должен отметить что есть интересные идеи в Tailwind. Но думаю что все же заглохнет и он.
@VitaliyHAN
@VitaliyHAN 2 жыл бұрын
Пожалуйста, перед записью видео проверьте правильность произношения английских слов. 20 секунд времени и на всем ролике правильное произношение, а не вот это вот все. Wind - ветер. Читается как Уинд. Tailwind - попутный ветер.
@ikorjefocur
@ikorjefocur 4 жыл бұрын
Как и bootstrap, это для новичков. Странно видеть, что его на серьёзе использует человек с 8-ми летним опытом разработки. Чел, ты просто перестал развиваться. Советую поменять место работы.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Откуда такие выводы?
@ramizqurbanli
@ramizqurbanli 4 жыл бұрын
tailwind.css 👍👍👍
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
👏🏻👏🏻👏🏻👏🏻👏🏻
@L-Lesiv
@L-Lesiv 4 жыл бұрын
а что с разметкой и адаптивностью?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Все прекрасно
@poul2008
@poul2008 4 жыл бұрын
По сути атомарный css
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
В лучшем виде
@Vnikny
@Vnikny 4 жыл бұрын
А если у тебя 20 элементов одинаковых, то для каждого один и тот же код со свойствами повторять? А как же главный грех-дублирование кода? И ещё интересно, как он с реактом дружит?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Есть директива apply. С реактом прекрасно дружит!
@iamname8758
@iamname8758 4 жыл бұрын
Так наоборот же ты не плодишь много css кода, а используешь повторно одни и те же классы)
@olezhonnv3215
@olezhonnv3215 4 жыл бұрын
@@iamname8758 И плодишь ХТМЛ код.
@olezhonnv3215
@olezhonnv3215 4 жыл бұрын
Так с реактом все можно подружить - в чем проблема?
@andreigunderin
@andreigunderin 4 жыл бұрын
А в чем отличие от Atomic CSS ?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Если честно не шарю за атомик
@GreenHappyHelix
@GreenHappyHelix 4 жыл бұрын
сама подача материала странная. упоминается, что у бутстрапа сайты одинаковые, а у тайлвинд нет, но в итоге в конце видео в практической части просто берутся и копируются готовые одинаковые подобия компонентов. сам фреймворк еще не смотрел, но судя по всему такой подход подходит для всяких там реактов да вью жс, когда кастомизируешь компонент кнопку и она на всем сайте. если надо поменять стиль кнопки то лезешь в компонент и меняешь. в видео же ощущение что применяют его для лендинга, что странно, потому что при изменении кнопки придется лезть в ХТМЛ и у каждой кнопки менять классы.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Хотелось показать более для обширной аудитории, не все бы поняли суть с реактом
@yuriikilyk8923
@yuriikilyk8923 4 жыл бұрын
Видео я посмотрю но мне как-то удобней на чистом CSS с использованием плагина Emet там припроцесоры SCSS для меня это всё бред... Я какой-то клас для обэкта сделал за 1 минуту и сделал так как мне удобно и всё... А то учи наново какие-то классы мы со временем хотим упростить такие простые вещи до такой степени что даже не чувствуем кайф от того что ты имеешь сили и ума делаешь что-то тежолое и другие это оценивают...
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Дело привычки
@borisoffdenis
@borisoffdenis 4 жыл бұрын
Ну такое... Для быстрого клепания на фрилансе пойдет, а для долгосрочной поддержки не годится.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Каждому свое
@inzoddex8312
@inzoddex8312 4 жыл бұрын
Давно использую tailwind и просто ору с тех "умников" которые пишут, что дофига классов писать, что проще в css обычном кодить. Эти два слова я посвящаю вам - postcss и @apply. Прочитайте про них, что такое и как юзать, а уже потом орите в комментах.
@MsAkellla
@MsAkellla 4 жыл бұрын
Да ну нахер. Html ©
OYUNCAK MİKROFON İLE TRAFİK LAMBASINI DEĞİŞTİRDİ 😱
00:17
Melih Taşçı
Рет қаралды 9 МЛН
From Small To Giant Pop Corn #katebrush #funny #shorts
00:17
Kate Brush
Рет қаралды 40 МЛН
The Joker wanted to stand at the front, but unexpectedly was beaten up by Officer Rabbit
00:12
Do You Really Need Bootstrap or Tailwind?
8:28
Lama Dev
Рет қаралды 194 М.
РЕАЛЬНЫЙ СОБЕС В СБЕР НА 300К. МИЛАЯ СОБЕСЕДУЮЩАЯ
1:24:45
Уроки Bootstrap 5 - Введение и установка
8:54
Web Developer Blog
Рет қаралды 94 М.
OYUNCAK MİKROFON İLE TRAFİK LAMBASINI DEĞİŞTİRDİ 😱
00:17
Melih Taşçı
Рет қаралды 9 МЛН