Английская версия: https://evilmartians.com/chronicles/bootstrap-an-intervention
У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:
-
Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.
-
Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент
h1.title
, на него сработают все правила для теговh1
и все правила для класса.title
. Так как весь html состоит из тегов, то правил которые применяются на теги без классов будут работать на все вообще.
Соответственно назначать или переназначать стили у тегов – это примерно то же самое, что править прототипы объектов в JS, чем в свое время печально славился Prototype.js
. Эти стили унаследует вообще все объекты и если их потом захочется поменять, то результат будет такой же, как если ты решил в прототипе объекта поменять результаты какого-то метода, который используют все дети этого объекта. Вероятность что-то сломать почти 100%.
- Вложенные селекторы. Можно написать селекторы
.nav .item {...}
и.menu .item
и.item
в зависимости от места вывода будет показываться по-разному. Все хорошо пока тебе не нужно поместить блок menu внутрь блока nav. Тогда сайдэффекты становятся совершенно непредсказуемые. По сути аналог вложенных селекторов из программирования – это функция которая в зависимости от места где её вызывают, выдает разный результат. Например в одном местеsum(2,2)
может возвращать3
, а в другом5
.
Хорошая методология занимает предотвращением этих проблем. Покажу как это делает БЭМ, но CSS Modules, Polymer или всякие решения с инлайновыми стилями для Реакта тоже решают именно их, только другим способом.
Как именование классов по БЭМу помогает решать эти проблемы:
- БЭМ запрещает применять стили на теги, максимум ресет. На id тоже нельзя, потому что такие элементы нельзя на странице использовать 2 раза, а сколько раз он тебе понадобится ты не всегда знаешь заранее. Все стили можно применять только к классам.
- БЭМ создает для всех компонентов глобальный неймспейс – все классы которые относятся к компоненту начинаются с одного префикса. Это позволяет исправить второй пример таким образом:
.nav__item
,.menu__item
. Если один вложить в другой не будет конфликта правил. - Под каждый компонент в БЭМ создается своя папка – это защищает тебя от конфликтов в именах компонентов и при правильном использовании дает гарантию, что в глобальном неймспейсе будет только один компонент с таким префиксом.
- В БЭМ есть только один вид вложенных селекторов: модификатор > элемент. Оба начинаются с одного префикса, оба живут в одном файле, оба никак не влияют на другие компоненты.
Bootstrap нарушает КАЖДОЕ из этих правил:
- Bootstrap переназначает стили тэгов.
- Bootstrap в куче случаев меняет способ отображения элемента в зависимости от того, кто его родители. Хорошо хоть сейчас делает это через
>
, а не просто так. Но вот https://github.com/twbs/bootstrap/blob/master/less/button-groups.less такие штуки все равно сильно уменьшают предсказуемость и усложняют редизайн. - Bootstrap загрязняет глобальный неймспейс сотнями классов с очень generic именами:
.table
,.dropdown
,.row
,.left
, и т. д. Которые надо все помнить и ни в коем случае не использовать самому.
При таком подходе отстреливание себе ноги становится только вопросом времени.
Чтобы не отстрелить себе ногу Bootstrap'ом и получить от него пользу нужно чтобы проект соответствовал ряду требований:
- На проекте много страниц.
- Страницы собираются из простых базовых элементов. Базовый – это кнопка или таблица. Сложный – это пост в фейсбуке или комментарий к нему, они состоят из нескольких тегов и их нужно переносить и реиспользовать все вместе.
- Нет мест, где изменение и эксперименты с дизайном могут сильно повышать/понижать конверсию или другие важные метрики. Как корзина или страница товара в интернет магазине.
- Никогда не будет глобального редизайна.
- Типизация страниц окупается скоростью их внедрения.
Еще можно для прототипов и быстрого старта, чтобы потом выкинуть. Для остальных случаев это боль скорее.
У интернет-магазина есть главный KPI – конверсия в покупки. Покупки очень сильно зависят от дизайна страницы товара и корзины/процесса оформления заказа. Изменение конверсии во многом зависят от дизайна, прибавка на полпроцента может тебе позволить удвоить размер команды фронтендеров.
Тут ты дизайнера не запинаешь в гайды. Наоборот ему нужно давать максимум возможностей для экспериментов и изменений, брать эти варианты и гонять 50 сплит-тестов одновременно. С разными отступами, размерами шрифтов, кастомными элементами и прочим.
Если делать такое на Бутстрапе без использования какой-нибудь методологии, то очень просто незаметно сломать что-то в какой-то невидимой сейчас части сайта или в каком-то редком состоянии текущей страницы. Ну и процесс подгонки по большей части будет состоять из борьбы с Бутстрапом и его локальными переназначениями.
Примеры:
http://www.amazon.com/ – тысячи страниц, сотни сплиттестов, постоянный ползучий редизайн. http://www.gog.com/ – мало стандартных элементов и много кастомных под этот сайт. http://www.nytimes.com/ – очень много сложных компонентов и исключений. Несколько ключевых экранов от дизайна которых зависят KPI. Сюда же большинство сайтов больших СМИ. http://arzamas.academy/ – так, до кучи.
Довольно часто компоненты которые тебе надо реиспользовать – это не кнопки и формы, а что-нибудь сильно больше по размеру. Например пост на Фейсбуке или лента с комментариями оттуда же. Бутстрап тебе никак не поможет тебе выделить этот компонент и защитить его от сайдэффектов. Тебе все равно придется использовать какую-нибудь методологию.
А вот вызвать проблемы, когда ты вставляешь этот элемент в какое-то новое место можно довольно легко.
Самый простой вариант взять сложный компонент в котором используется .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/ польза тоже весьма относительная будет.
Сюда хорошо подходят те же интернет-магазины, большие онлайновые журналы/газеты, городские порталы.
Допустим ты решил поменять кегль у заголовков на каком-нибудь http://www.e1.ru . Ты переназначил стили h1 и h2. Ну ой, теперь тебе надо протыкаться по 100+ типам страниц и убедиться что у тебя не сломалось ничего: Ничего не вылазит за границы блоков.
При этом помня что еще https://github.com/twbs/bootstrap/blob/master/less/jumbotron.less и другие переназначатели и что изменения базовых стилей их скорее всего поломает.
Постепенно (постранично или даже по частям страниц) переводить сайт на новый дизайн при этом продолжая использовать стандартные бутстраповские элементы не получится.
Примеры:
https://www.kickstarter.com/ – за последние пару лет сайт как минимум дважды глобально передизайнивали, не считаю отдельных локальных экспериментов.
Из всего Бутстрапа нам нужны заголовки, две кнопки и два поля формы. Остальное параллаксы, видео, большие иконки и прочее. Сайт нужен на месяца, после этого его выключат. Борьба с бутстрапом тут съест больше времени, чем пользы принесет.
Как пример: http://um.mos.ru/promo/gosudarstvennyy_istoricheskiy_muzey/
No comments.
Да, у Бутстрапа есть своя зона применения. Но она точно не 80% сайтов. К 20-30% он подходит хорошо. Еще на столько же его можно натянуть, с весьма вероятными потенциальными проблемами. В остальных случаях сразу нет.
ну и надо всегда помнить, что проект обычно начинается как что-то простое и предсказуемое, а потом в процессе мутирует во что-то совсем другое. В случае с Bootstrap это будет большой проблемой, в случае с BEM или CSS Modules оно будет просто работать.
Автор статьи объективно прав, это так и никак иначе, это ясно всем. Если кто-то не согласен с этой статьей, то он не прав и обманывает себя, зная, что он дилетант и не прав, но принять этого не может и всеми силами противится.
Бутстрап это удел быдло-программистов — обычно это пехапешники, которые начали заниматься фронтендом. Ну, как начали, им сказали, что, мол, давай пиши и фронтенд тоже. И вот этот пехапешник из своего бэкенд-мира вошел в совершенно другой дивный фронтенд-мир. Дальше. Вот смотрите, какой менталитет у пехапешников, которые пишут бэкенд-код — «так, есть задача → надо её решить → а есть ли уже готовый модульчик или плагинчик или компонентик? → опа! есть! уже кто-то написал, зашибись! → композер инсталл → нормально, работает!». И вот с таким менталитетом и логикой они приходят во фронтенд-мир и тоже начинают искать что-то готовое, готовые плагинчики и модульчики, на любой пук они ищут готовые плагинчики, плагинчики, плагинчики. «Посмотри, есть ли уже готовый плагинчик для этого», «Заюзай плагинчик, вот ссылка», «Подпили плагинчик чуть-чуть» — вот типичный ход мыслей пехапешника-фронтендера. Они совершенно не соображают, что нельзя во фронтенде подключать кучу килобайтов плагинчиков на каждый пук. Они не соображают, что любые плагинчики в результате просто не дадут тебе сделать шаг влево шаг вправо как только такой шаг понадобится, как только нужно будет сделать что-то хоть мало-мальски кастомное. Главное, что всё работает же! Хуяк-хуяк и в продакшен. Заказчик доволен, менеджер доволен!
Вот точно так же и с Бутстрапом — это некий святой грааль для фуллстекеров-пехапешников, это некий большой плагинчик для вёрстки, который всё уже умеет и всё там есть и сайт сам сделается за вечер на коленке. Надо только скачать сам Бутстрап, жиКвери, запилить тонны плагинчиков, еще плагинчиков, оверрайдить тонны стилей, бороться с каскадом в классах, постоянно оверрайдить классы в каскаде, пережить этот кошмар и... и нормально, всёжиработает!!1 Сплавляем проект тупому заказчику, который нифига в этом не варит. Начинаем клепать следующий проект по такой же схеме! А кто будет поддерживать этот проект? А не важно, там же всё стандартное, на Бутстрапе, любой разберется... :)
Пехапешники-фронтендеры не понимают, что Бутстрап нужн исключительно для прототипирования страничек и только для прототипирования, чтобы запилить что-то реально работающее и потыкать, а не для реальных проектов. Вернее, был нужен, в далеком 2001 году. Потом появились мощные прототипировщики, типа, InvisionApp.
Пехапешники-фронтендеры совершенно не рубят в вёрстке, ибо чтобы рубить в всёрстке, нужно годами работать именно во фронтенде.
Пехапешники-фронтендеры совершенно не рубят в стилях, каскаде и что это такое и почему это плохо.
Пехапешники-фронтендеры совершенно не рубят, что не надо главнй блок контента сайта делать float'ом left, чурбаны. Это в прототипе странички ты быстренько накидал
.col-md-8
просто, чтобы был бок контента, а справа от него.col-md-4
сайдбар или менюшка... Но не весь сайт делать на флоатах, изверги!Пехапешники-фронтендеры совершенно не рубят в чем идиотство класса
.col-md-12
, который делает блок 100%-й ширины иfloat: left
, ааа, всё, я ржу как притырок, у меня истерика от своей писанины начинается.В общем, приверженцы плагинчиков, жиКвери, Бутстрапа и бутстрапа головного мозга просто-напросто фундаментально ошибаются, являются дилетантами и говнокодерами.
Бутстрап это индикатор быдлокода и быдлокодингового сайта.
Ну и напоследок, статистика — 100% всех сайтов, которые хоть в каком-то виде использовали Бутстрап, со временем вправляют себе мозги и потихоньку начинают отказываться от Бутстрапа, а позже выпиливают его нафиг полностью от слова совсем-присовсем-вообще. Это всегда так и никогда наоборот.
Не обманывайте себя.