Мифы о Bootstrap

  Рет қаралды 1,853

Лёха Объяснит

Лёха Объяснит

Күн бұрын

Только ленивый фронтендер не ругает Bootstrap, но на самом деле все проблемы лишь от того, что его не умеют правильно готовить. В этом видео я расскажу, как одной строчкой кода можно поменять внешний вид всех кнопок или сделать 13-колоночную сетку
00:00 - Введение
01:34 - Миф 1. В Bootstrap много лишнего
05:09 - Миф 2. Нужно переопределять очень много стилей
07:03 - Миф 3. Плохая сетка
09:05 - Миф 4. Зачем столько всего ради одной лишь сетки
11:08 - Миф 5. Я всё лучше сделаю сам
12:35 - Послесловие
13:44 - Заключение

Пікірлер: 47
@Lok1goD
@Lok1goD 9 ай бұрын
Лёха! Спасибо! Классно объясняешь, я раньше был противником бутстрапа, думал ябатя вёрстки и кастомных классов, открыл для себя бутстрап год назад и офигел, скорость вёрстки росла сопоставимо количеству изученных классов бутстрапа! Не понимаю как я раньше без него жил!
@reactnext13
@reactnext13 9 ай бұрын
Леха могёт , аж захотелось воспользоваться бутстрапом
@fedordostoevskiy4209
@fedordostoevskiy4209 6 ай бұрын
👍, я всегда думал главный плюс всех css libs, что стили работают везде и на всём. Всегда.
@vanish1987
@vanish1987 Жыл бұрын
Подписываюсь под каждым словом! Больше всего хейтят бутстрап мамкины оптимизаторы и неосиляторы
@rz3txg
@rz3txg Жыл бұрын
Алексей, спасибо! Как всегда на высоте. Алексей, хотелось бы посмотреть видео с практикой от вас. Что-нибудь эдакое сотворить в реальном времени. Или автобиографичный видос, как вы попали и почему работаете в этой сфере. В любом случае жду следующего видео. Спасибо.
@alex-will-explain
@alex-will-explain Жыл бұрын
Часть моей биографии можно найти в моём видео, как войти в IT)) что-то такое я планирую в будущем. Но делать видео в реальном времени всегда сложно, потому что как только включаешь запись, всегда сделаешь какой-то ляп и думаешь, из-за чего оно не работает 😂
@user-iu4de9lu1s
@user-iu4de9lu1s 11 ай бұрын
Привет Леха я тоже Леха)
@DimaAni
@DimaAni 11 ай бұрын
А мне понравился😁бустрап.И как фреймворк и как справочник для все решений.
@avbolshakov
@avbolshakov Жыл бұрын
Спасибо! Оч. интересно. Интуитивно согласен с ващими выводами. Что бы вы порекомендовали чтобы войти в тему бутстрапа быстро не-фронтендуру? html + сss на базовом уровне есть. но хочется для своих проектов красивостей. а может лучше смотреть в сторону tailwind? спасибо
@alex-will-explain
@alex-will-explain Жыл бұрын
В первую очередь надо смотреть в сторону препроцессоров, вроде SCSS, его ещё часто называют SASS, но это не совсем одно и то же. А ещё надо освоить работу со сборщиками, в первую очередь с webpack. Если придётся работать со старыми проектами, то можно посмотреть ещё gulp. Если хочется чего-то более нового, то посмотрите Vite, но пока стандартом де-факто считается webpack. Лично мне с tailwind работать не приходилось, но много слышал и читал о нём. Там проблема лишнего стоит ещё острее, чем в Bootstrap, но это точно также решается с помощью препроцессоров и сборщиков
@katesmith2371
@katesmith2371 Жыл бұрын
👏👏👍
@alext5030
@alext5030 10 ай бұрын
Есть достаточно сложный способ решения вопроса размера бутстрапа, но он реально выдает лучший результат - это purgeCSS. Сложность заключается в том, что настроить его работу в любимом верстальщиками Gulp сложно, но возможно. Я только что сделал это, наконец-то. Основная проблема заключается в том, что на выходе либо нет sourcemaps для очищенного файла, либо он удаляет лишнее, потому что нужно учитывать динамическиие классы (JS), иначе сломется все, что работает на JS (dropdown, например). А проблема настроить все - это лютая дичь в последовательности тасков в Gulp и правильность указания всех путей ("кто на ком стоял") так, чтобы purgeCSS отработал так, чтобы учитывались все классы (и из JS), а также sourcemaps сгенерировались на уже очищенный файл. Кому sourcemaps не интересны - тем проще. В общем, сделал я так, что у меня теперь автоматически в финальной версии минифицированного файла содержатся тоько реально использующиеся классы бутстрапа. JS бутстрапа тупо помодульно подключать можно.
@alex-will-explain
@alex-will-explain 10 ай бұрын
С purgeCSS нужно сразу быть готовым к тому, чтобы постоянно расширять список исключений, потому что помимо классов js есть ещё куча классов с бэкенда, которые присутствуют в коде не всегда. В целом это полезный инструмент, но требует очень много внимания
@TheDieselGames
@TheDieselGames 10 ай бұрын
Да, гениально. Давайте уствновим фреймворк что бы потом ковырятся в его кишках. Люди выбирабю более оптимальные решения. Помоему зп 500 $ должна быть у тебя.
@alex-will-explain
@alex-will-explain 10 ай бұрын
Именно за этим и используют фреймворки - чтобы ковыряться в их кишках. А как иначе?
@AlekseyKlenin
@AlekseyKlenin 3 ай бұрын
Лёха, привет! Я переопределяю переменную красного цвета (bootstrap'овскую по умолчанию), на более красный (#f00). Цвет меняется, но при этом на переменной по умолчанию цвет текста белый, а у меня становится черным. Как поправить цвет текста? bootsrap 5.3
@alex-will-explain
@alex-will-explain 3 ай бұрын
Надо смотреть в девтулзах, откуда тянется стиль (если sourcemaps включены, то покажет прямо scss файл). Скорее всего цвет текста рассчитывается как контрастный цвет через миксин или функцию
@uszakow
@uszakow 11 ай бұрын
Короче посыл такой, что бутстрап не бесполезен, потому что его можно кастомизировать. В принципе хороший аргумент, хотя и возникает вопрос зачем что-то кастомизировать, если за то время, пока поймешь что кастомизировать и как, уже можно свое решение написать. 10:00 - не понял в чем проблема добавить свои стили для тэгов p и strong. Какая-то странная проблема. Если был таск на то, что тэг p и тэг strong именно в админке должны выглядеть определенным образом, то не понимаю, почему программист не добавил соответствующие стили. Если же такого таска не было, то и говорить не о чем - программист не сделал чего-то, что от него не требовалось. В конце концов быть может в проекте вообще не предполагалось наличие тэгов p и strong - почему программист должен был бы для них в таком случае добавлять стили? Из практики бутстрап нужен в 3х ситуациях: 1. Если речь вообще не о стилях. Скажем, кто-то делает курс по работе с Angular и хочет показать как подключать модули и делать двухстороннее связывание, а не стилизовать кнопочки, то стоит подключить хотя бы какие-то стили из бутстрап или какого-нибудь матириал и не возвращаться к теме стилей. 2. Если стили не имеют значения - если есть заказ на какой-то сайт, который должен тупо выполнять функционал, а не каким-то особым образом выглядеть. В этом случае на проекте может даже вообще не быть дизайнов. Вполне приемлемая ситуация при разработке какого-то корпоративного приложения, где работники должны заполнить какую-то форму, а не любоваться стилями. Либо же просто надо показать заказчику какой-то прототип, сделанный на коленке, а уже потом после его одобрения предполагается все делать как надо. Тут то же самое, что и в первом пункте - стоит подключить хоть какие-то стили, потому что никого не интересует "пиксель перфект". 3. Если дизайнер изначально рисует проект, опираясь на бутстрап. Могу себе представить существование такого проекта, вот только лично не доводилось с таким встречаться. Видео в своем роде познавательное, но лично я останусь при своем мнении, что единственное, что нужно фронтэндщику - это Sass. Все "бутстраповские" стили в произвольном количестве без проблем генерируются в паре-тройке файлов - те же отступы для марджинов и паддингов генерируются в простом цикле @for и @each. Причем именно с теми размерами, которые придумал твой гениальный дизайнер на проекте, а не теми, которые придумал кто-то где-то и которые зачем-то надо дополнительно кастомизировать только чтобы подогнать под имеющийся дизайн. Да собственно бутстрап так и работает - просто нет проблемы сделать свой собственный "мини-бутстрап", где будет все нужное и не будет ничего лишнего.
@alex-will-explain
@alex-will-explain 11 ай бұрын
Абсолютно неверная позиция по поводу "пока поймешь что кастомизировать и как, уже можно свое решение написать" - если бы все так думали, человечество бы так и не придумало ничего сложнее каменного молотка. Весь технический прогресс основан на том, чтобы разбираться, как что-то работает, и не делать своё без необходимости. По поводу той истории про стили типографских элементов: был нанят фронтендер для того, чтобы сделать фронтенд для сайта компании, одним из типов страниц были статьи. Так вот в статическом макете он сверстал текст статей, опираясь на кастомные классы. В чём проблема была сделать нормально - очевидно, во фронтендере. За ним тогда пришлось очень много переделывать. А вообще, если верстальщик не знает, что такое типографика, то ему ещё рано браться за работу. Что касается временных затрат на кастомизацию бутстрапа - разобраться, где там что кастомизировать - это один раз, а потом те же кнопки кастомизируются за пару минут. Это значительно быстрее, чем писать весь набор стилей с нуля. А ещё непонятно, что значит фраза "дизайнер изначально рисует проект, опираясь на бутстрап"? В бутстрапе нет ни одного элемента, который нельзя было бы привести к нужному виду одними лишь переменными.
@uszakow
@uszakow 11 ай бұрын
@@alex-will-explain ок, может как-то из интереса попробую сделать учебный проектик на кастомизированном бутстрапе, как в этом видео, посмотрю, насколько это удобно. Учитывая, что недавно на работе дорабатывал кастомную библиотеку веб-компонентов, то подозреваю, что задача будет выглядеть похоже. Вообще же пока не встречал задач, связанных со стилями, которые нельзя было бы быстро и красиво решить только с помощью Sass без использования всяких фреймворков. И если в программировании не возникает вопрос "зачем нужен React/Angular/Vue, если можно писать в чистом JS?" (достаточно на чистом JS попытаться сделать выделенный компонент или роутинг для SPA, чтобы все вопросы отпали), то в случае со стилями и бутстрапом такой вопрос почему-то возникает, и не только у меня. Серьезно - должна быть причина, почему никто всерьез не будет оспаривать, что писать хоть в React, хоть в Angular, хоть в Svelte удобнее, чем в чистом JS, а вот в случае бутстрапа такого единогласия нет и множество людей предпочитает писать стили в одном из препроцессоров или даже в чистом CSS. И вряд ли эта причина заключается в консерватизме девелоперов, отвергающих технический прогресс.
@alex-will-explain
@alex-will-explain 11 ай бұрын
@@uszakow обычно если человек пишет на React/Angular/Vue и не любит бутстпап, то он просто любит другой css-фреймворк 🤣 Я, например, встречал людей, которые долго могли рассказывать о минусах бутстраповской сетки, но при ближайшем рассмотрении оказывалось, что в их любимом фреймворке сетка построена на точно таких же принципах, только названия классов другие))) Что касается дилеммы react vs vanilla js, тут тоже не всё так однозначно. Я встречал множество людей, которые считают, что все эти реакты только усложняют проект))
@qurnosov_live
@qurnosov_live 5 ай бұрын
Любой проект начинаю с bootstrap. Причем, фигачу именно CDN. Почему его все боятся? Ведь CDN грузит файлы с сервера, который ближе к пользователю, что сокращает время загрузки. Не раз видел как люди извращаются с подключением bootstrap, че-то там сетку вычленяют, popper обходят стороной, а потом идут и ленятся сделать разные картинки для десктопной и мобильной версии или вообще грузят их без оптимизации. Короче, Bootstrap - one love. Всякие там tailwind'ы рядом не стояли
@alex-will-explain
@alex-will-explain 5 ай бұрын
Я из CDN пробовал грузить его ещё во времена тройки. Вот там мучение было с переопределением стилей всяких кнопок и прочего. Сейчас, с CSS-переменными, наверное уже значительно гибче
@ProBelDev
@ProBelDev Жыл бұрын
А вот такой интересный момент, разве все эти классы типо mx-3, py-2(да и по сути сетка, align текста и тд), это не то, от чего мы уходили с приходом css? Почему для того, что бы поменять отображение элементов на страницы - мы должны править html? Чем это лучше чем то, что были атрибуты в html или css через style="..."? Да та же сетка, у нас вчера было 5 колонок на странице, сегодня 4(как например с видео на ютубе), опять редактируем html для изменения внешнего вида)
@alex-will-explain
@alex-will-explain Жыл бұрын
CSS придумали для того, чтобы HTML-документы можно было более гибко стилизовать, а не для того, чтобы никогда в жизни не править HTML-код. С точки зрения скорости разработки нет никакой разницы, что менять - одну цифру в названии класса или одну цифру в свойстве width в CSS-файле. С точки зрения производительности, универсальные классы просто необходимы для того, чтобы избежать дублирующихся CSS-правил для разных элементов, и как следствие разбухания файла стилей. Даже когда верстаешь сам с нуля, всё равно потом начинаешь создавать какие-то свои классы, чтобы не копипастить одно и то же по несколько раз. В качестве альтернативы классам можно использовать SCSS-миксины, это очень здорово помогает упростить исходный код и в целом увеличить удобство поддержки проекта, но в итоге потом миксины всё равно компилируются в те же самые дублирующиеся куски CSS, и файл стилей всё равно распухнет и без всяких фреймворков. Но самый главный плюс использования не только Bootstrap, а вообще любого CSS-фреймворка состоит в том, что они дают возможность добавлять на страницу новые элементы, не прибегая к правке стилей. Если не использовать никакой CSS-фреймворк, то если добавил на сайт, скажем, кнопочку, необходимо править ещё и CSS. А файлы CSS кэшируются в браузере. Большинство юзеров знать не знает, как сбросить кэш сайта, не говоря уже о том, что на мобильных устройствах не каждый разработчик вспомнит, как это делать. И тут два варианта, либо юзеры увидят кнопку без стилей, либо применять решения по инвалидации этого кэша, например, компилировать CSS с рандомным именем, но в таком случае даже завсегдатаи сайта столкнутся с тем, что сайт загрузится немного медленнее. Ну и возвращаясь ещё раз к тому, приемлемо ли задавать внешний вид элементов через правку HTML, хочу спросить, доводилось ли вам работать с дизайн системами или использовать компонентный дизайн? Любой мало-мальски сложный компонентный дизайн подразумевает то, что у компонентов могут быть разные варианты и/или состояния, и как вы представляете себе реализацию разных состояний компонента без изменения атрибутов HTML?
@ProBelDev
@ProBelDev Жыл бұрын
@@alex-will-explain Цитата из википедии "Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). " Ну так если проблема с кэшем css файла, давайте просто все стили инлайном писать прямо в html, все равно при каждом изменении внешнего вида нам нужно его править) А по поводу атрибутов, я говорил про те, которые отвечают только за внешний вид, никто не будет background указывать его в html, только если этот background не заполняется ЯП при генерации страницы)
@alex-will-explain
@alex-will-explain Жыл бұрын
@@ProBelDev вы всерьёз полагаете, что имеет смысл отказываться от CSS-фреймворков, тратить дополнительно сотни часов на разработку любого проекта только ради того, чтобы CSS классы в HTML соответствовали требованиям статьи из Википедии? Может быть посоветуете какие-то валидаторы или линтеры, проверяющие код на соответствие требованиям Википедии?
@ProBelDev
@ProBelDev Жыл бұрын
@@alex-will-explain так я не говорю, что его не нужно использовать) я же написал «интересный момент», так на подумать, как одни современные инструменты ломают основную концепцию других инструментов)
@alex-will-explain
@alex-will-explain Жыл бұрын
@@ProBelDev все эти концепции лишь теории, особенно те, что выложены в Википедии. В реальности любое приложение, библиотека или фреймворк хоть где-то да нарушает теорию, либо использует какие-то кейсы, которые принято считать исключениями. Кроме того сама Википедия содержит кучу откровенно неверных трактовок
@EvgenOl
@EvgenOl 7 ай бұрын
13:55 Тебе не приходилось встречать более гибких css-фреймворков? Ты реально не в курсе о существовании Тайлвинда? На момент съёмки ролика он точно существовал!
@alex-will-explain
@alex-will-explain 7 ай бұрын
Tailwind не гибкий, в нём просто много классов. Если на сайте есть 1000 кнопок в разных местах, и все они имеют закруглённые углы, и нам вдруг понадобилось убрать скругления, то в tailwind нужно будет в 1000 мест убрать из разметки класс. А в bootstrap достаточно поменять одну строчку SCSS.
@Alexey2904
@Alexey2904 11 ай бұрын
Сетка рабица лучше😅
@romastyi83
@romastyi83 10 ай бұрын
Зачем нужен бутстрап, если его нельзя использовать в реальных проектах?)) Дизайнер нарисовал макет, ты подключаешь бутстрап и полностью переписываешь))
@alex-will-explain
@alex-will-explain 10 ай бұрын
Почему нельзя? Что именно приходится полностью переписывать? Я же показал, как бутстрап элементарно подгоняется под любой дизайн.
@alext5030
@alext5030 10 ай бұрын
Единственное, что иногда проще дописать в своих стилях - это всякие нестандартные паддинги. Но это тоже не обязательно. Вообще, в scss можно нагенерить дополнительных бутстрапных классов. Т.е. можно свои map-ы делать и генерить классы. Например, есть мапа cо стандартными 1-5 spacers,которые используются для генерации 100500 классов типа border-5, p-2 и т.п. Так вот, можно сгенерит свою мапу с дополнительными spacer-ами и своими значениями. И так там все, что угодно, можно добавлять. Но это та часть, scss, которой мало кто заморачивается, но если заморочиться, то все становится просто.
@WERWOLION
@WERWOLION 10 ай бұрын
Сетка вобще никогда не нужна если ты освоил Sass
@alex-will-explain
@alex-will-explain 10 ай бұрын
Если не использовать никакую сетку, это автоматически означает, что любой новый html элемент в проекте не будет иметь нужную ширину до тех пор, пока ты не напишешь к нему стили. Ясное дело, что при использовании sass это делается одной строкой - применил миксин, и готово. Но это не вариант для объёмных проектов с большим количеством разработчиков.
@WERWOLION
@WERWOLION 10 ай бұрын
@@alex-will-explain смешно, в Бэм у него и не должно быть ширины. Ширина или 100% или макс-видс. Куда вы собрались ложить новый элемент? В Нормальной верстке вы делаете флексы и гриды и без сетки создаёте автоматичность в зависимости от того что вам нужно. Это как должно быть в вакууме. Естественно уровень ру комьюнити полнейшее дно и они юзают бутсрап место которому на помойке. Вёрстка делается сразу динамичной и новые элементы ее не ломают. Т.е если вы добавляет что-то то хватает дописать срочки сss , т.к очевидно что многое не расчитанно.
@alex-will-explain
@alex-will-explain 10 ай бұрын
@@WERWOLION простой пример. Допустим, есть карточка товара с разделением верхней половины 5/7. И решают добавить новую фичу, покупка в рассрочку, доступную только для некоторых товаров. И если есть рассрочка, то, чтобы всё поместилось то надо делать разделение 4/8. Так вот, при использовании сетки, бэкендер просто поменяет цифры в классах сетки. А без использования сетки нужно писать ту самую дополнительную строчку scss, перекомпилировать стили и т.д. Конечно, это мелочь. Но с точки зрения бизнеса приходится либо привлекать дополнительно фронтендера, либо изначально искать фуллстек-специалиста, что в любом случае выльется в дополнительные траты. И вообще, если сетки так плохи, почему их используют и в других фреймворках, типа Material UI или Ant Design? А комьюнити вы вообще ловко приплели)) Последние три года я работаю только с проектами для ЕС и США. Так вот, там не было ни одного проекта, в котором бы не использовался Bootstrap.
@WERWOLION
@WERWOLION 10 ай бұрын
@@alex-will-explain с точки зрения бизнеса это низкий уровень фулстек это полное дно Допустим, есть карточка товара с разделением верхней половины 5/7 я тут совсем не понял что это за бред Я конечно понял что дешего . Но что вы собрались делить в карточке? добавление расрочки вы делите от размера сетки? Расрочка в карточке её размер должен быть от карточки и очевидно задаваться тогда в процентах от размера карточки. Размер шрифтов расрочки должен задаваться в em , дальше цвет и фон Вы собрались в сувать в HTML классы для фона , для размеров шрифтов и пр? А в бутрапе есть размер шрифта в ем? Потому что в итоге мы получаем по вашему винегрет - и его невозможно нормально поддерживать т.е поддержка дороже разработки в итоге.
@WERWOLION
@WERWOLION 10 ай бұрын
@@alex-will-explain резюмирую бутрап как и джквери в 23 году это мовитон!
@palkan2590
@palkan2590 11 ай бұрын
мнение не изменилось
@alex-will-explain
@alex-will-explain 11 ай бұрын
Спасибо за развёрнутый и аргументированный комментарий!
@palkan2590
@palkan2590 11 ай бұрын
@@alex-will-explain не ожидай большего
Мифы о PHP
10:33
Лёха Объяснит
Рет қаралды 7 М.
Can teeth really be exchanged for gifts#joker #shorts
00:45
Untitled Joker
Рет қаралды 15 МЛН
Василиса наняла личного массажиста 😂 #shorts
00:22
Денис Кукояка
Рет қаралды 9 МЛН
Универ. 13 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:07:11
Комедии 2023
Рет қаралды 6 МЛН
Как войти в IT бесплатно?
19:45
Лёха Объяснит
Рет қаралды 1,3 М.
Документация API (Swagger) + XML комментарии
29:01
Блоггер Витичка
Рет қаралды 71
Как работают сайты
16:04
Лёха Объяснит
Рет қаралды 764
React, Vue, Angular - что это и зачем это нужно?
9:44
Лёха Объяснит
Рет қаралды 852
Хватит говорить о паттернах проектирования
17:30
Мифы об операционных системах
32:03
Лёха Объяснит
Рет қаралды 2,6 М.
Can teeth really be exchanged for gifts#joker #shorts
00:45
Untitled Joker
Рет қаралды 15 МЛН