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

.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 оно будет просто работать.

@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 конструктор шаблонов сайта из готовых блоков.