А нужно ли учить Bootstrap?

Многие начинающие веб-разработчики, насмотревшись многочисленных обучающих видеороликов от старых фрилансеров на Ютубе ("старый" в данном контексте означает, что уровень навыков может быть не совсем актуален в текущих условиях), очень сильно убеждены, что обязательно надо знать такой CSS фреймворк как Bootstrap и тогда тебя ждёт успех, а верстать станет очень просто. И они обычно очень удивляются, что на профессиональных курсах их этому и не собираются учить.

Хочу выразить своё отношение к этому вопросу. Дело в том, что для начинающего разработчика популярный Bootstrap представляет собой некий "костыль", который помогает делать первые шаги и особо не разбираться в том как работает css, одновременно вводя новый уровень абстракции, заставляя учить его многочисленные классы. Как только у человека появляется хотя бы немного понимания layout страницы, появляются навыки располагать элементы на странице и понимание адаптивности (media запросы), то следует эти костыли сразу же отбрасывать. Тем более ни в какой серьёзной компании с CSS фреймворками не работают, ну кроме совсем маленьких студий, которые свои сайты верстают буквально на коленках. И даже в последнем случае есть исключения, когда с Bootstrap работают на профессиональном уровне (с исходниками), подгоняя его под конкретные нужды и делая собственные UI наборы для него. Так же я видел, как от bootstrap подключают отдельные компоненты из исходников в scss и компилируют в свой общий css, но все эти заморочки с автоматизацией вёрстки не для новичков. Кроме того, следует различать как минимум три версии Bootstrap:

1. Bootstrap 3, которая до сих пор используется в устаревших проектах. Она прекрасно работает на старых версиях Internet Explorer и сделана на устаревших float. 
2. Современная версия Bootstrap 4 работает уже на flexbox, которые так себе отображаются даже в последней живой версии IE 11. 
3. Новейшая версия Bootstrap 5 (сейчас находится в стадии альфа-версии, но переход уже начат), в которой выброшены на помойку истории все старые технологии типа jQuery и поддержка любых версий Internet Explorer. Кроме того он изначально полностью сделан на SASS, позволяя вам брать от него нужные части и очень просто кастомизировать под себя (с помощью custom свойств CSS и utility API). А ещё они сделали собственный сет иконок, так что их можно использовать в своих проектах вместо Font Awesome, которые от которых, по большому счёту, сплошной вред. В новой версии они действительно сделали очень много, чтобы предоставить вам инструменты для кастомизации и делать непохожие друг на друга сайты (главная претензия противников Bootstrap). 

Разумеется Bootstrap не стал бы настолько популярным, если бы не обладал положительными сторонами. CSS фреймворки это отличная вещь, если вы собираетесь быстро сделать для себя какой-то прототип (например "админку" для сайта или форму), а заморачиваться с вёрсткой и отрисовкой всяких кнопочек и форм ввода вам никак не хочется - вот тогда на помощь придут фреймворки и сделают красиво почти без особых затрат. Ну разве только затрат на подключение лишнего css, который увеличит время загрузки вашего сайта. Именно поэтому стоит избегать фреймворков на сайтах, где важна оптимизация и быстродействие. CSS фреймворки незаменимая вещь при обучении программированию на javascript фреймворках, где всё ваше внимание должно быть направлено на программирование, а не на дизайн. 

А теперь расскажу о CSS фреймворках с которыми я познакомился. 

1. Bootstrap. Это классика от компании Twitter и её стоит знать, но вовсе не заучивать, как думают новички. Самые важные для понимая вещи это сетки (разделение на ряды, контейнеры и знаменитая 12-колоночная система) и некоторые классы-утилиты (отступы, размеры, работа со шрифтами). Все эти вещи примерно похожи во всех остальных фреймворках и если вы выучите их использование у Bootstrap, то без проблем сможете пользоваться и в других фреймворках, которые отличаются лишь названиями классов и дизайном элементов интерфейса. В школе W3C имеется отличное пособие на английском языке (автоматический переводчик Google тоже неплохо переводит), которое учит основам Bootstrap на простых примерах. Кстати, для популярных фреймворков вы обязательно найдёте приличный перевод документации на русский язык. Имеется он и для документации Bootstrap.
2. Bulma CSS. Прекрасный небольшой фреймворк, который я рекомендую использовать в качестве замены огромному Bootstrap. Документация не очень большая, так что с изучением проблем не будет. В качестве названий классов использует предложения на английском языке, а не аббревиатуры. Не тащит с собой огромного количества элементов, позволяет модульность из коробки, когда вы подключаете в свой проект только то, что вам непосредственно нужно: например, вам нужны только кнопки и формы, так зачем тащить за собой всё остальное? 
3. Materialize CSS. Большой и крутой фреймворк от программистов Google. Позволяет делать интерфейсы в стиле Material Design как на Android. Ваше приложение будет одинаково выглядеть как в вебе, так и на мобильном устройстве. Документация мне показалась попроще, чем у Bootstrap. Много элементов интерфейса завязано на javascript, так что небольшое понимание его работы стоит иметь. Material design это не собственность Google, а концепция в дизайне, поэтому любые сторонние разработчики могут создавать свои фреймворки. Вы можете попробовать Material Lite от сторонних разработчиков, преимущество которого в том, что он не завязан на javascript. 
4. Sematic UI. Большой фреймворк с поддержкой тем. Похож на UIKit. 
5. Pure CSS. Крайне минималистичный фреймворк в 3,8 КБ, да ещё и с модульностью. Можете скачать исходники и полностью перенастроить его под свои нужды. 
6. Picnick CSS. Небольшая CSS библиотека в которой уже переопределены стандартные свойства оформления. Подойдёт вам, если вы не хотите вообще писать какой-либо CSS, а вам нужно просто украсить вывод в html. Такие фреймворки ещё называются "class-less" (без классов). 
7. Mustard UI. Ещё один простой и минималистичный фреймворк в 5 КБ. Документация занимает всего 10 экранов. Разумеется можно скачать все модули и легко перенастроить через переменные. 
8. Tachyons CSS Toolkit. Если вам мало минималистичных фреймворков, то вот вам ещё один. Обладает большими возможностями по настройке и использует что-то вроде атомарного CSS, когда много всяких классов, которые заменяют свойства css. 
9. Foundation. Большой коммерческий фреймворк, который любят всякие крупные корпорации и сайты. Прямой конкурент "бутстрапу". Имеет возможности по гибкой настройке. 
10. Tailwind CSS. Особый фреймворк "без фреймворка", который основан на идее атомарного css. Не всем такой подход вообще нравится, лично я был в шоке, когда впервые увидел - меня учили не складывать html и css вместе в один код, потому что это похоже на inline css. Тем не менее такой подход позволяет очень быстро кодить сайты и делать прототипы, не влезая в дебри css стилей. Особо любим фронтендерами, которые используют фреймворки - им как раз удобнее держать логику и дизайн в одном компоненте. 

Как видите, Bootstrap лишь один из инструментов и далеко не самый главный, хотя и самый популярный, потому что именно в нём придумали сетку и систему именования классов, которыми сейчас пользуется половина веб-разработчиков мира. В любом случае вам необходимо на достаточно хорошем уровне знать HTML и CSS, чтобы уметь работать с любым фреймворком профессионально и чтобы они были для вас реально полезными инструментами в разработке, а не костылями, которые ограничивают вашу фантазию. Удачи в работе! 

P.S.: Вот ещё один список фреймворков на любой вкус и для любых целей.