За и против использования bootstrap?

Question

[seva1]

Привет всем

Хотел посоветоваться с аудиторией тостера по поводу bootstrap.

Склоняюсь к использованию bootstrap в проекте каталога Авто.
Причины почему хочу его выбрать
- Framework - это благо
- Быстрота разработки
- С точки зрения трудозатрат(Косты) ниже
- Независимость от верстальщика
- Отсутствие костылей при разработке адаптива

Прочитал кучу материалов часть лютует за, часть против.

Меня очень волнует вопрос SEO, скорости загрузки, избыточности bootstap. Плюс, не могу понять какие вообще преимущества у верстки без использования Framework?

Спасибо за ответы

Comments

[copal]

плюс - работает на всех устройствах и системах, а Вам для этого нужно будет как минимум иметь все устройства и системы. Минус - если хотите изменить стиль темы, то придется писать свой bootstrap.

[Vasily Novosad]

Чувствую, и здесь будет два лагеря - кто-то за, кто-то против. Поэтому, просто примите решение сами и НИ КОГО НЕ СЛУШАЙТЕ - делать-то вам.

[nepster-web]

Vasiliy Novosad: Скорее будет 2 ситуации, где он нужен и где он не нужен.

[Максим Тимофеев]

nepster09: 100%

[Максим Тимофеев]

copal: Писать свой bootstrap? Зачем? Он гибко кастомизируется через less.

[Никита]

Less. Начните с него, не будет вопросов подобных. Вами упомянутый бутстрап - это прослойка над Less изначально, потом Sass добавили.

Answer 1

[nepster-web]

Ну во первых ошибка многих в том, что подключают бутстрап по любому чиху, даже если нужно просто грид сетка. В первую очередь bootstrap это компоненты, поэтому лучше всего взять только то, что нужно: getbootstrap.com/customize

А так вообще плюсы и минусы следующие:
+ стандартизация. Все кто работают с bootstrap понимают вашу верстку, что и как делать.
+ экономия времени
- в любом случае под свой кастомный дизайн придется перекрывать стили
- полная зависимость в js компонентах от jquery (ну это такое)
- некоторые неловкости при работе с методологиями.

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

И б, если вы фрилансер и делаете обычные средние или мелкие проекты, то bootstrap отличный выбор, я бы даже сказал обязательный выбор в пользу некой стандартизации.

Comments

[latteo]

В чем минусы bootstrap для большой компании не понял?

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

Как по мне от фреймворков в такой ситуации только плюсы:
+ не надо тратить время на написание хелпа на базовые вещи;
+ вместо вычитывания непонятного кода можно пойти в гугл;
+ единый стиль кода;

[atis //]

latteo: не не не. у нас проекте не нужен бутстрап и точка! точка!! бутстрап крут для небольших сайтов но для супер пупер дизайна за который отвалили тыщу баксов его использовать нельзя. мне бы руки оторвали )

[Никита]

Не знаю кто вас лайкает, но они в заблуждении ровно как и вы. А как же reference? И как вы bootstrap юзаете, скачиваете css и подключаете? Судя по тому что вы написали - то это именно так. Не учите плохому, а, пожалуйста, после таких как вы приходят на работу люди и не понимают что с bootstrap делать.

[nepster-web]

Никита: прочитайте мой ответ еще раз, потом еще раз, потом еще еще и еще, пока не поймете, что я написал. Особенно про компоненты.

[Никита]

nepster09: "getbootstrap.com/customize" и "в любом случае под свой кастомный дизайн придется перекрывать стили" при использовании любого фреймворка - чушь полнейшая. Вы в курсе что bootstrap это не css файлик, а фреймворк на языке Less?

[nepster-web]

Никита: серьезно ? И сколько человек использует его в декомпилированном виде ? Нет, даже не так, сколько web-разработчиков используют пред/постпроцессоры css ? Если это делаем я, вы и еще 1000 наших коллег, это даже 5% от всех не набирается судя по нашим собеседованиям. Это первое. А второе, импортировать бутстрап исходники к себе в проект, перкрывать стили в пред/пост процессорах не плохая идея, но опять таки, весьма малый % разработчиков будет этим заниматься.

Хотя вы правы, так делать тоже не плохо. Но и я не не прав, учитывая все ситуацию на рынке.

[Никита]

nepster09: вы глубоко ошибаетесь, в моём кругу я не знаю таких кто юзает css, скачанный с сайта, может если только не прототип настряпать для себя, но это уже индивидуальные проблемы. А новичков в большинстве случаев приходится доучивать.

[nepster-web]

Никита: у меня такое ощущение, что сейчас в мире it все делятся на новичков и на профи. Так вот у кого-что в работе не склеилось, учат html и идут в it. Поэтому вы даже не представляете сколько людей, которые еще юзают обычный css еще и криво.

[Владислав Безенсон]

Не согласен с первым минусом. Стили перекрывать приходится крайне редко. Чаще все меняется под свои нужды через переменные less/sass

[sompylasar]

latteo: Зависит не от размера компании, а от размера продукта и длительности его существования и сопровождения (поддержки, доработки). Рано или поздно приходится задумываться о поддерживаемости, модульности, устойчивости кода к изменениям.

Бутстрап -- это 600+ глобальных переменных. Если это на мысли не наталкивает, значит, вероятно, вы не делали больших продуктов с длительным сроком жизни.

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

[nepster-web]

sompylasar: что значит больших продуктов ? Вы вообще понимаете что такое бутстрап и что такое большой продукт ? Покажите хоть 1 большой продукт, который использует бутстрап ? ВК? Фейсбук ? Может быть твиттер ? Бутстрап это инструмент, который решает 90% базовых задач для мелких и средних проектов.

Вы из тех кто пихает бутстрап куда нужно и не нужно со всеми "600+ глобальных переменных" ?

[Олег Ободин]

почему бы не подключить бутстрап через CDN и не париться с getbootstrap.com/customize, сетку можно вообще свою использовать, благо флексы сейчас позволяют с легкостью верстать блоки с понятными классами, готовые же элементы переназначить в стилях под нужный дизайн как угодно и та даааам, у вас крутой средний сайт.
а что собственно еще нужно рядовому верстальщику?))

[nepster-web]

Олег Ободин: для рядового верстальщика всеравно. Бутстрап вполне годный выбор.

[sompylasar]

> sompylasar: что значит больших продуктов ? Вы вообще понимаете что такое бутстрап и что такое большой продукт ? Покажите хоть 1 большой продукт, который использует бутстрап ? ВК? Фейсбук ? Может быть твиттер ? Бутстрап это инструмент, который решает 90% базовых задач для мелких и средних проектов.

nepster09: Наоборот! Вы как-то меня неправильно поняли. Я как раз против того, чтобы пихать бутстрап в большие продукты, даже на начальной стадии (единственный вариант, когда это допустимо – это когда делается прототип на выброс).

> Вы из тех кто пихает бутстрап куда нужно и не нужно со всеми "600+ глобальных переменных" ?

Я как раз из тех, кто разрабатывает большие продукты (веб-приложения) с временем жизни, доработки поддержки в несколько лет. Префиксованный БЭМ, CSS Modules, модульный подход в разработке вообще и в верстке в частности.

В одном из продуктов, к сожалению, как раз начали с бутстрапом (отдали на откуп junior'у, а потом было уже поздно), и теперь мучаемся, выпилить никак не можем. Думаю, вы понимаете, о чем я.

[nepster-web]

sompylasar: да походу, друг друга не поняли =). Ну у меня нет особо супер крупных проектов, скорее "мы" среднечковая контора по разработке среднячковых продуктов на среднечковом уровне. Но мое мнение, что место бутстрапу для бэток и админок.

Сам я использую SMACSS и scss + postcss. А вот CSS Modules не зашли, так как у нас все через сервер, а там классы меняются при каждом компилинге или вы имели ввиду вебпак ?

[sompylasar]

nepster09:

> Но мое мнение, что место бутстрапу для бэток и админок.

Ага, точно.

> Сам я использую SMACSS и scss + postcss. А вот CSS Modules не зашли, так как у нас все через сервер, а там классы меняются при каждом компилинге или вы имели ввиду вебпак ?

Webpack конечно, обязательно. Куда уж без него...

Answer 2

[DezU]

Бутстрап на 99% проектов абсолютно не нужен. Чистейшее говнокодерство, в основном для тех, кто по прямой профессии не является фронтендом/верстальщиком. Те люди, которые распиарили бутстрап, как некий "стандарт" вёрстки (а всякая школота потом подхватила), должны гореть в аду. Даже их хвалёные сетки уже особо не нужны после активной интеграции флексбокса в браузеры. Видимо, пост такие же говнокодеры и лайкали

Comments

[Алекс Глебов]

У вас маркетинговая лапша на ушах, от авторов курсов по верстке, которые сами в нулевых застряли.
Сложность проектов сейчас такая, что нет времени мыслить пикселями и делать кнопочки с нуля. Проекты собираются из готовых компонентов, своих или чужих.
И обычный путь разработчика такой: писать все с нуля - выделять куски которые нужны в каждом проекте в обособленные решения - использовать чужие решения.
А брать чистый флекс или грид вместо сетки - это трата времени на ловлю багов.

[DezU]

Алекс Глебов, маркетинговая лапша - это 20-часовые курсы по фреймворку, который можно за пару часов освоить и забыть про него вообще (при необходимости можно просто куски кода брать из документации). Новички привыкают так работать, а потом сами ни фига сделать не могут. У каждой нормальной компании (или отдельного опытного разработчика) уже есть свои наборы миксин и готовых компонентов для css/js. Можно и не засирая глобальное пространство кучей ненужных стилей, всё делать быстро, чисто и красиво (хотя по поводу чисто и красиво - это явно не про бутстрап).

Answer 3

[web-mehanik]

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

Answer 4

[Максим Тимофеев]

SEO развивается крайне быстро, многие пользуясь устаревшими данными и основываясь на своем незнании современных технологий отвергают framework.
Но я не вижу проблем для SEO в bootstrap (говорю о 3 версии, 4 еще альфа там наверняка много косяков еще и не ковырял е глубоко пока). В bootstrap есть пара моментов, которые не совсем валидны в виде role="", но как в всегда вопрос seo больше связан с криворукостью верстающего, нежели с framework.

Comments

[seva1]

Максим Тимофеев А можешь описать пожалуйста о этих пару моментов?

[Максим Тимофеев]

seva1: Все просто, зайди в валидатор кода и посмотри на что будет ругаться. Чаше всего ругается на атрибут role, который используется где попало.

Answer 5

[sompylasar]

Повторю здесь в виде ответа.

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

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

Бутстрап -- это 600+ глобальных переменных. Если это на мысли не наталкивает, значит, вероятно, вы не делали больших продуктов с длительным сроком жизни.

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

Answer 6

[Alex Fastovets]

Мне всегда было интересно, почему именно bootstrap? Почему ни какой-то другой? Я после первого проекта от него отказался! Мое личное мнение что он глючный, тяжелый, и уже заезженный))) (сугубо мое мнение, и я его не навязываю никому!!!)

пс: использую либо же UIkit или же Semantic UI

Answer 7

[ZoomLS]

Уже нет в нём особо смысла. Все использовали его в основном из-за сетки в своё время. Сейчас есть замечательный Flexbox. Остальное можно подключать отдельно, что надо.

Comments

[Олег Ободин]

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

Answer 8

[Никита Киселев]

Если возникают подобного рода вопросы, то да, используйте бутстрап. Установите nodejs, установите gulp, разберитесь с less, потом откомпилируйте бутстрап так как вам нужно. После 3-4 проекта придет понимание и таких вопросов возникать не будет.

Comments

[seva1]

FatalRabbit я со стороны заказчика интересуюсь:) Мне нужно чтобы сделали не blaсkbox:)

[Никита Киселев]

seva1: со стороны заказчика тут одни плюсы. Если верстальщик опытный, то от использования продукта, который создан, поддерживается и тестируется большой корпорацией, будут одни плюсы.

Answer 9

[Роман]

Использую только сетку, меня все устраивает. На СЕО ни как ни влияет!

Answer 10

[Максим Будин]

Фреймворк это не благо. Благо это понимание, когда фреймворк нужен, а когда нет. Базовые возможности бутстрапа реализуются на коленке за 30 минут, и нет нужды тащить десятки килобайты стилей, которые вы никогда не будете использовать. Если проект серьезный, то разработчик нужен, а бутстрап нет.

Answer 11

[Александр Филиппенко]

Если нужно быстро собрать простой, но приятно выглядящий интерфейс на свой вкус, то бутстрап - отличный выбор! Можно даже не кастомизировать, стандартные элементы выглядят неплохо, многим уже привычны и понятны. Если нужно сверстать что-то по макету, то зависит от макета. Зачастую от бутстрапа в таких случаях больше вреда чем пользы, хотя я и сам по началу стремился впихнуть его везде где можно, и где нельзя.
Для каждой задачи есть свой наиболее подходящий инструмент, важно понять какой именно в каждом конкретном случае.

Answer 12

[EGO]

Отвечу со своей колокольни (за бутстрап, т.к. сам использую).
SEO: нормально всё с ним, правильно приготовленный бутстрап + хорошая типографика = любовь поисковиков.
Скорость загрузки: берёте не компилированные стили, а less-файлы и любым сборщиком это собираете. Что не нужно - отключаете в bootstrap.less + минификатор и на выходе получаете нормальную css. С js-файлами аналогично.
Избыточность: скорее наоборот, иногда тут не хватает, иногда там, но опять же, при правильной готовке - всё выходит хорошо.

По минусам могу сказать следующее:
1. Scrollspy плагин глючит, придётся повозиться.
2. Вёрстка форм "увлекательное" занятие... вот тут имеется избыточность.
3. Название переменных для цветов (primary, warning, danger, success, info) подходит не для всех проектов. Т.е. если у проекта цветовая палитра определена как основной1, основной2, контраст, акцент и прочее, то можно немного запутаться.

Answer 13

[Школьник.]

1) Мне ничего не нравится в Bootstrap, кроме адаптивной вёрстки.
2) Я понял, что самый лучший дизайн получается, когда его создают в Photoshop, c Bootsrtap в Photoshop не пофантазируешь, только если макет нарисовать.
3) SEO думаю не против, google уж точно. Главное контент не тырить.
4) Загрузка будет медленней, но это не критично, счёт на миллисекунды

Comments

[Максим Тимофеев]

Возможно Вы просто не умеете его готовить. Если его использовать не as is, а через less и кастомизировать его под нужды проекта, то он не ограничивает, а помогает.

[Школьник.]

Максим Тимофеев: с less не знаком:) Предпочитаю чистый css

[Школьник.]

Максим Тимофеев: но посмотрю когда-нибудь посмотрю, что это за зверь такой

[Максим Тимофеев]

Владимир Мусихин: Less генерит чистый css. Использование bootstrap без less действительно может не нравится. Но это не говорит о том, что он плох. Крайне советую ознакомится с less или sass.
Переопределив несколько переменных в less файлах bootstrap - Вы получите framework полностью подходящий по Ваш проект. Например, что бы переопределить цвета в css Вам надо адское кол-во стилей прописать, для кнопок, панелей и т.д. В Less меняется 1 переменная.

[Школьник.]

MaxKorz: Еще спросите, как вы работаете вообще на чистом JavaScript? Просто я не ищу легких путей:)

[atis //]

1) прямо в цель!

[Никита Киселев]

Владимир Мусихин: если ты не знаешь что такое less/sass, то ты не знаешь и не представляешь что такое bootstrap. Зачем тогда лезть с глупыми ответами и морочить другим голову? Правильно удивилась выше, кто тебе платит за это?

[mydarck]

Никита Киселев: Ну на самом деле вопрос задал человек, который, вероятно, тоже будет подключать bootstrap так сказать через "quick start". По этому возможно Володька Мусихин от части прав. Он отпугнет человека который с bootstrap наделает больше костылей чем без него.

[Школьник.]

Никита Киселев: Если человек, который задал вопрос знал про ваши лески и сасалки, то он бы не задавал этот вопрос.

Answer 14

[Aleksey Chernikov]

Что касается плюсов, то все верно. Не соглашусь пожалуй только с адаптивом - при грамотном подходе нет никаких костылей.
Минусы. Куча встроенных классов, которые иногда заставляют переназначать свойства элементов. Из за этих же классов достаточно проблематично сделать чистый код при использовании методологий вроде БЭМ. Если нужно будет сделать pixel perfect, то не каждый макет получится заверстать идеально с bootstrap.

Что касается SEO, это вообще отдельная тема и тут наверное нет никакой специфики. Скорость загрузки тоже можно в любом случае поднять до максимума.

Comments

[Максим Тимофеев]

pixel perfect - это зло, если макет готовит дизайнер не знающий web. А зачастую так и есть. При современной резине в сайте, отрисовка 4 макетов - глупость, а как по другому сделать pixel perfect?
БЭМ и css фреймворк - сложно, но возможно, если использовать через less

[Aleksey Chernikov]

Дизайнер, не знающий веб - это вообще зло. А потом ещё и заказчики, которые не разбираясь пишут в ТЗ "Bootstrap и Pixel Perfect". Хотя это не реально с какой то космической структурой , не подходящей для сетки bootstrap. Поэтому boostrap и не является универсальным средством, что я и хотел сказать.

Что касается отрисовки 4 макетов - глупость только до тех пор, когда сложность проекта не выходит за рамки типичных корпоративных сайтов, блогов или лендинг-пейдж. Грамотный дизайнер на серьезном проекте не позволит верстальщику импровизировать, что правильно.

БЭМ и фреймворк - далеко не сложно, а просто неправильно с точки зрения методологии. Ни один препроцессор не избавит от каши сторонних тегов в html и, как следствие, созданию расплывчатой иерархии отдельно взятого компонента. Плюс разнообразные обертки, которые тоже мешают.

[seva1]

ch3rri а в чем преимущества БЭМ если говорить на цифрах? Максим Тимофеев Максим было бы тоже интересно услышать Ваше мнение

[Максим Тимофеев]

seva1: БЭМ позволяет работать с крупным проектом, крупной компании. Когда много разработчиков делают свои участки кода не догадываясь. что будет в итоге. По сути это абстракция. Способ систематизировать css. Плюс возможность писать генераторы, так как есть строгая структура именования классов.
На мой взгляд, для фриланса БЭМ - онанизм. Но если Вы yandex - то это панацея.

Answer 15

[noita_kronk]

Мне в бутстрап не нравится то, что в нём высокий уровень связанности кода (high cohesion). Т.е. вы управляете однотипными элементами не из одного места через css, применяя в т.ч. наследование, а из непосредственно html-кода через классы элементов. Мне кажется, это главный недостаток.