Длинная телега про Бутстрап

.md

Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention

Вводная часть

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

1. Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.

2. Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые применяются на теги без классов будут работать на все вообще.

Соответственно назначать или переназначать стили у тегов – это примерно то же самое, что править прототипы объектов в JS, чем в свое время печально славился Prototype.js. Эти стили унаследует вообще все объекты и если их потом захочется поменять, то результат будет такой же, как если ты решил в прототипе объекта поменять результаты какого-то метода, который используют все дети этого объекта. Вероятность что-то сломать почти 100%.

3. Вложенные селекторы. Можно написать селекторы .nav .item {...} и .menu .item и .item в зависимости от места вывода будет показываться по-разному. Все хорошо пока тебе не нужно поместить блок menu внутрь блока nav. Тогда сайдэффекты становятся совершенно непредсказуемые. По сути аналог вложенных селекторов из программирования – это функция которая в зависимости от места где её вызывают, выдает разный результат. Например в одном месте sum(2,2) может возвращать 3, а в другом 5.

Зачем нужны методологии

Хорошая методология занимает предотвращением этих проблем. Покажу как это делает БЭМ, но CSS Modules, Polymer или всякие решения с инлайновыми стилями для Реакта тоже решают именно их, только другим способом.

Как именование классов по БЭМу помогает решать эти проблемы:

1. БЭМ запрещает применять стили на теги, максимум ресет. На id тоже нельзя, потому что такие элементы нельзя на странице использовать 2 раза, а сколько раз он тебе понадобится ты не всегда знаешь заранее. Все стили можно применять только к классам.
2. БЭМ создает для всех компонентов глобальный неймспейс – все классы которые относятся к компоненту начинаются с одного префикса. Это позволяет исправить второй пример таким образом: .nav__item, .menu__item. Если один вложить в другой не будет конфликта правил.
3. Под каждый компонент в БЭМ создается своя папка – это защищает тебя от конфликтов в именах компонентов и при правильном использовании дает гарантию, что в глобальном неймспейсе будет только один компонент с таким префиксом.
4. В БЭМ есть только один вид вложенных селекторов: модификатор > элемент. Оба начинаются с одного префикса, оба живут в одном файле, оба никак не влияют на другие компоненты.

Что делает Bootstrap

Bootstrap нарушает КАЖДОЕ из этих правил:

1. Bootstrap переназначает стили тэгов.
2. Bootstrap в куче случаев меняет способ отображения элемента в зависимости от того, кто его родители. Хорошо хоть сейчас делает это через >, а не просто так. Но вот https://github.com/twbs/bootstrap/blob/master/less/button-groups.less такие штуки все равно сильно уменьшают предсказуемость и усложняют редизайн.
3. Bootstrap загрязняет глобальный неймспейс сотнями классов с очень generic именами: .table, .dropdown, .row, .left, и т. д. Которые надо все помнить и ни в коем случае не использовать самому.

При таком подходе отстреливание себе ноги становится только вопросом времени.

Когда Boostrap можно использовать

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

1. На проекте много страниц.
2. Страницы собираются из простых базовых элементов. Базовый – это кнопка или таблица. Сложный – это пост в фейсбуке или комментарий к нему, они состоят из нескольких тегов и их нужно переносить и реиспользовать все вместе.
3. Нет мест, где изменение и эксперименты с дизайном могут сильно повышать/понижать конверсию или другие важные метрики. Как корзина или страница товара в интернет магазине.
4. Никогда не будет глобального редизайна.
5. Типизация страниц окупается скоростью их внедрения.

Еще можно для прототипов и быстрого старта, чтобы потом выкинуть. Для остальных случаев это боль скорее.

Примеры ситуаций когда Bootstrap НЕ подходит

1. Большие интернет-магазины и новостные сайты

У интернет-магазина есть главный KPI – конверсия в покупки. Покупки очень сильно зависят от дизайна страницы товара и корзины/процесса оформления заказа. Изменение конверсии во многом зависят от дизайна, прибавка на полпроцента может тебе позволить удвоить размер команды фронтендеров.

Тут ты дизайнера не запинаешь в гайды. Наоборот ему нужно давать максимум возможностей для экспериментов и изменений, брать эти варианты и гонять 50 сплит-тестов одновременно. С разными отступами, размерами шрифтов, кастомными элементами и прочим.

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

Примеры:

http://www.amazon.com/ – тысячи страниц, сотни сплиттестов, постоянный ползучий редизайн. http://www.gog.com/ – мало стандартных элементов и много кастомных под этот сайт. http://www.nytimes.com/ – очень много сложных компонентов и исключений. Несколько ключевых экранов от дизайна которых зависят KPI. Сюда же большинство сайтов больших СМИ. http://arzamas.academy/ – так, до кучи.

2. Сайты со сложными реиспользуемыми в разных местах компонентами

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

А вот вызвать проблемы, когда ты вставляешь этот элемент в какое-то новое место можно довольно легко.

Самый простой вариант взять сложный компонент в котором используется .form-control или label и поместить его в какую-нибудь форму с модификаторами. Куча разнообразный сайдэффектов обеспечена: https://github.com/twbs/bootstrap/blob/master/less/forms.less

Также много интересного можно получить если ты хочешь сделать выпадающий компонент (как непрочитанные сообщения в фейсбуке) и разместить его в закрытом состоянии в шапке, рядом с кнопкой которая его открывает: https://github.com/twbs/bootstrap/blob/master/less/navbar.less

Примеры:

https://mail.yandex.ru/ – мало стандартных контролов, куча кастумных контролов, много исключений, поддержка легаси. http://trello.com/ – много сложных компонентов, не очень много стандартных бутстраповских. Для http://try.discourse.org/ польза тоже весьма относительная будет.

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

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

Допустим ты решил поменять кегль у заголовков на каком-нибудь http://www.e1.ru . Ты переназначил стили h1 и h2. Ну ой, теперь тебе надо протыкаться по 100+ типам страниц и убедиться что у тебя не сломалось ничего: Ничего не вылазит за границы блоков.

При этом помня что еще https://github.com/twbs/bootstrap/blob/master/less/jumbotron.less и другие переназначатели и что изменения базовых стилей их скорее всего поломает.

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

Примеры:

https://www.kickstarter.com/ – за последние пару лет сайт как минимум дважды глобально передизайнивали, не считаю отдельных локальных экспериментов.

4. Промосайты и лэндинги

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

Как пример: http://um.mos.ru/promo/gosudarstvennyy_istoricheskiy_muzey/

5. Игры в браузерах

No comments.

Резюме

Да, у Бутстрапа есть своя зона применения. Но она точно не 80% сайтов. К 20-30% он подходит хорошо. Еще на столько же его можно натянуть, с весьма вероятными потенциальными проблемами. В остальных случаях сразу нет.

ну и надо всегда помнить, что проект обычно начинается как что-то простое и предсказуемое, а потом в процессе мутирует во что-то совсем другое. В случае с Bootstrap это будет большой проблемой, в случае с BEM или CSS Modules оно будет просто работать.

Google рекомендует БЭМ, селекторы по БЭМ имеют закономерное время отклика. Экономия потребления мобильных ресурсов. Особенно актуально для ожидаемого/среднего latency на выборку CSS-селекторов.

• Google Developers – Ограничение объема и сложности вычисления стилей

В зависимости от используемого селектора и браузера на вычисление всего этого может уйти масса времени. Приблизительно 50% времени, которое тратится на вычисление стиля элемента, уходит на сопоставление селекторов, а вторую половину времени занимает построение RenderStyle (представления стиля) на основе сопоставленных правил.

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

Все четко и по делу. Я, честно говоря, повторял подобную телегу людям несколько раз. Я прекрасно понимаю, почему бутстрап гуд в админке и прототипах, но его использование в остальном довольно спорно. Почитал, головой покивал). Плюс многие проблемы могут быть не видны, пока делаешь один или проект небольшой,
P.S. псевдо-элементы с display:table в .row - это огонь.

Кто может, сбросте ссылку на выпиленный бутстрап только с сеткой. Заранее спасибо

@klark123, http://getbootstrap.com/customize/ - но лучше подключать less/sass версии к проекту, больше контроля.

@klark123, https://github.com/tonekk/bootstrap-grid

а есть такая же шпаргалка но по foundation?

@AlexanderBukhtaty неа, но там все ровно то же самое если судить по такому примеру: http://foundation.zurb.com/sites/docs/drilldown-menu.html

Не выдержал и решил вставить свои 5 копеек.

1. Бутстрап будет хорош для джуниоров которые при подключении могут сразу увидеть все прелести таблиц стилей,
   новых для них вещей, медиазапросов, построить галлерей и т.д. Нужно увидеть сразу, не дергать кодера нарисуй мне так сделай так.
2. Для небольших проектов, где нужны базовые элементы. Где нам нужно простое меню, все просто и без излишеств.
   Люди делают и все хорошо.
   http://expo.getbootstrap.com/page2/
   http://calhoun.ca/
   .vc_custom_1434486412782 {
   margin-top: -3px !important;
   }
   Даешь больше important.
   vc_col-sm-4 занимаются своим дело. Не нужно с нуля писать. И таких мелки классов много
   По опыту скажу что ну мне подходит, не подходит мне набор стилей бустрапане, но у них хорошие простые брекпоинты для адаптивности.
   http://bootstrap-3.ru/css.php#grid-media-queries
   Итого:

• для небольших сайтов, стандартных и предсказуемых - сойдет. Меню - слайдер, инфо 3 колонки футер. Все! Такое уже отстилино и таких сайтов 100500 Но, руки все же прямые нужны. На практике начинается море !important, но не беда, главное что сайт по быстрому сделается, гов** сайтик так сказать. Да! Для некоторых заказчиков важна чтобы сайт был быстро сделан. Плевать они хотели на код. Сайт нужен на 1 месяц.
• для сложных и высоконагруженных проектов, даже не думать о бутстрапе.

Гы, бутстрап и для маленьких сайтов, проектов и админок излишен будет.
Особенно "умиляют" в нем куча дивок и многокилометровые классы к ним.

бустрап для лендингов ок

Автор статьи объективно прав, это так и никак иначе, это ясно всем. Если кто-то не согласен с этой статьей, то он не прав и обманывает себя, зная, что он дилетант и не прав, но принять этого не может и всеми силами противится.

Бутстрап это удел быдло-программистов — обычно это пехапешники, которые начали заниматься фронтендом. Ну, как начали, им сказали, что, мол, давай пиши и фронтенд тоже. И вот этот пехапешник из своего бэкенд-мира вошел в совершенно другой дивный фронтенд-мир. Дальше. Вот смотрите, какой менталитет у пехапешников, которые пишут бэкенд-код — «так, есть задача → надо её решить → а есть ли уже готовый модульчик или плагинчик или компонентик? → опа! есть! уже кто-то написал, зашибись! → композер инсталл → нормально, работает!». И вот с таким менталитетом и логикой они приходят во фронтенд-мир и тоже начинают искать что-то готовое, готовые плагинчики и модульчики, на любой пук они ищут готовые плагинчики, плагинчики, плагинчики. «Посмотри, есть ли уже готовый плагинчик для этого», «Заюзай плагинчик, вот ссылка», «Подпили плагинчик чуть-чуть» — вот типичный ход мыслей пехапешника-фронтендера. Они совершенно не соображают, что нельзя во фронтенде подключать кучу килобайтов плагинчиков на каждый пук. Они не соображают, что любые плагинчики в результате просто не дадут тебе сделать шаг влево шаг вправо как только такой шаг понадобится, как только нужно будет сделать что-то хоть мало-мальски кастомное. Главное, что всё работает же! Хуяк-хуяк и в продакшен. Заказчик доволен, менеджер доволен!

Вот точно так же и с Бутстрапом — это некий святой грааль для фуллстекеров-пехапешников, это некий большой плагинчик для вёрстки, который всё уже умеет и всё там есть и сайт сам сделается за вечер на коленке. Надо только скачать сам Бутстрап, жиКвери, запилить тонны плагинчиков, еще плагинчиков, оверрайдить тонны стилей, бороться с каскадом в классах, постоянно оверрайдить классы в каскаде, пережить этот кошмар и... и нормально, всёжиработает!!1 Сплавляем проект тупому заказчику, который нифига в этом не варит. Начинаем клепать следующий проект по такой же схеме! А кто будет поддерживать этот проект? А не важно, там же всё стандартное, на Бутстрапе, любой разберется... :)

Пехапешники-фронтендеры не понимают, что Бутстрап нужн исключительно для прототипирования страничек и только для прототипирования, чтобы запилить что-то реально работающее и потыкать, а не для реальных проектов. Вернее, был нужен, в далеком 2001 году. Потом появились мощные прототипировщики, типа, InvisionApp.

Пехапешники-фронтендеры совершенно не рубят в вёрстке, ибо чтобы рубить в всёрстке, нужно годами работать именно во фронтенде.

Пехапешники-фронтендеры совершенно не рубят в стилях, каскаде и что это такое и почему это плохо.

Пехапешники-фронтендеры совершенно не рубят, что не надо главнй блок контента сайта делать float'ом left, чурбаны. Это в прототипе странички ты быстренько накидал .col-md-8 просто, чтобы был бок контента, а справа от него .col-md-4 сайдбар или менюшка... Но не весь сайт делать на флоатах, изверги!

Пехапешники-фронтендеры совершенно не рубят в чем идиотство класса .col-md-12, который делает блок 100%-й ширины и float: left, ааа, всё, я ржу как притырок, у меня истерика от своей писанины начинается.

В общем, приверженцы плагинчиков, жиКвери, Бутстрапа и бутстрапа головного мозга просто-напросто фундаментально ошибаются, являются дилетантами и говнокодерами.

Бутстрап это индикатор быдлокода и быдлокодингового сайта.

Ну и напоследок, статистика — 100% всех сайтов, которые хоть в каком-то виде использовали Бутстрап, со временем вправляют себе мозги и потихоньку начинают отказываться от Бутстрапа, а позже выпиливают его нафиг полностью от слова совсем-присовсем-вообще. Это всегда так и никогда наоборот.

Не обманывайте себя.

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

Берем Vue.js и радуемся scoped-стилям и модульному JavaScript :)
А Bootstrap на самом деле зло!

В общем самое идеальное применение бутстрапа - это верстка админ панели сайта, или какого-нибудь опросника.
А так препроцессор + ваша любимая методология + мозг = любовь)

Но не весь сайт делать на флоатах, изверги!

А на чем? На таблицах? Если учесть что бс обрёл популярность когда ни о каких флексах/гридах в продакшн и речи быть не могло.

Не хочу топить за бутстрап (поддержка этих здоровенных структур тот ещё подарочек), однако некоторые коменты труЪ–фронтендеров заставили улыбнуться, особенно тот, что про композер и плагины — давай–ка расскажи мне, что жаваскрипт–фронтендеры не юзают npm на каждый чих:)

Как по мне — если делаете что–то с нуля, то, очевидно, бутстрап, особенно в 2к17, это не лучший выбор (насколько мне известно, даже для админок есть уже полностью готовые решения). Сейчас у нас есть flex (у некоторых, даже grid) и тонны генераторов и миксинов практически на все случаи жизни. Однако почему-то тут никто не берёт в расчёт реальную жизнь, где всё далеко не так лампово, и пони не срут радугой и 80% (а то и больше) заказчиков не готовы переплатить, просто потому что bootstrap/jquery/bitrix говно.

БЭМ — это конечно классно и удобно, и при возможности его, конечно же, нужно использовать, но в реальном мире, увы, мы сталкиваемся с одной неприятной проблемой.
Возьмём, к примеру, среднего e-commerce заказчика. В нашем залупинске (думаю, в вашем тоже, если вы не из зажравшейся) в проект, как правило, люди не готовы вкидывать больше 100-150к, и, естественно, тут даже и речи быть не может о серьёзной разработке с нуля. При этом, любому бизнесу всегда нужно "вчера". Поэтому берётся некая готовая тема в качестве скелета и перепиливается под дизайн.

Берём мы готовую тему (и даже не бесплатную).
А на чём у неё строится вёрстка? Правильно — как правило, это bootstrap 3.
А почему бутстрап? Правильно, потому–что каждая собака его знает на зубок и в него уже встроена куча прикольного дерьма.

---

Забавно было внедрять БЭМ вёрстку в битрикс e-shop. Выяснилось, что у них куча стандартных компонентов (довольно сложных, если переделывать, да и нафиг это не нужно) сильно завязана на бутстрапе, и проще всего оказалось тупо добавить импорты необходимых bootstrap модулей, чем перевёрстывать эти компоненты и переписывать их js говнокод.

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

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

Требования, чтоб дизайн на всех платформах, браузерах должен быть одинаков, должны уйти в историю. Накуй мне одинаковый дизайн в опера мини и в хроме новейшей модели? WebGL и прочие фишки так и так не будут в опера мини подобных браузерах работать.

А spa сайты с бутстрапом , джиквери, модернайзером, с вебкомпонентами вообще тихий ужас.

Интересно было почитать все доводы и мнения. Всем большое спасибо.

Единственное, что хотел бы сказать, как сказал @ikenfin все что тут написано для бизнеса никакой ценности не имеет.
Для бизнеса главное чтобы заработало, быстро и не дорого. Потом когда бизнес развивается уже нанимаются люди, профессионалы и все пишется по канонам и отваливается не малая котлета $. Опять же если этот бизнес крупный (веб сервисы, платформы и т.д). Если это сайт для кондитерской, для юр агенства и т.д. то стандартного быстрого лэндинга вполне достаточно на бустрапчике. И он будет работать и задачу свою выполнять. И даже переделывать его не особо будет нужно.

Те же магазины с интернет-покупками - они продают товары в физическом магазине. А сайт как дополнение. Многие магазины, которые ориентированы на интернет покупки (юлмарт, exist распавшийся) не особо то адаптированы и грамотно написаны с точки зрения frontenda. Потому что бизнесу это особо и не надо. Все это ценится среди разработчиков, которые могут понтанутся и такому же разработчику доказать что он дно, потому что делает на бутстрапе, а сам выпендриться что верстает в чистую с БЭМом со своим блэкджеком и... ну вы поняли.

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

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

Использование бутстрапа в своем проекте, это как купить белые кроссовки выйти из магазина и наступить в ...

Не хватает кнопки лайка :-) Пробуйте публиковать такие статьи как issue. Тут инструкция и даже читалка: https://github.com/nin-jin/habhub

Вот тут видел Bootstrap конструктор шаблонов сайта из готовых блоков.