Благодаря современным стандартам CSS, таким как CSS Grid Layout и Flexbox , кодирование макета веб-страницы больше не является такой болью. Если вы добавите к этому, что поддержка браузеров для Grid и Flexbox также довольно хороша, то неизбежно встанет вопрос: почему следует учитывать изучение и использование CSS-фреймворков в моей работе по разработке?
В этой статье я сконцентрируюсь на Bootstrap , так как он, возможно, является одним из самых популярных среди всех доступных библиотек CSS UI.
На мой взгляд, есть еще ряд причин, по которым все еще имеет смысл изучать и использовать Bootstrap сегодня.
Вот несколько из них для вас.
Что такое CSS Grid?
Рэйчел Эндрю, известный оратор и писатель по всем вопросам, связанным с CSS Grid, определяет это следующим образом :
Сетка — это сеточная система. Это позволяет вам определять столбцы и строки в вашем CSS, без необходимости определять их в разметке. Вам не нужен инструмент, который поможет вам выглядеть так, как будто у вас есть сетка, у вас действительно есть сетка!
Реализация этого стандарта CSS дает разработчикам столь необходимую возможность создавать макеты страниц с помощью собственного кода CSS, без зависимости от разметки HTML, за исключением наличия элемента-оболочки, который работает как содержащий сетку. Просто представьте гибкость и потенциал для творчества в веб-дизайне!
Например, вам не нужны пользовательские классы или дополнительные строки в разметке для построения этого простого макета:
Вот HTML-код:
<div class="grid">
<header>Header content</header>
<main>Main content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>Что касается CSS, это то место, где вы собираетесь создать свой визуальный макет. В этом простом случае достаточно всего лишь нескольких строк кода:
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 150px 50px;
}
header, footer {
grid-column: span 12;
}
main {
grid-column: span 8;
}
aside {
grid-column: span 4;
}
Вот и все, вы сделали! Неплохо.
Что такое Bootstrap?
На момент написания этой статьи 3,6% всего Интернета использует Bootstrap:
На сайте Bootstrap вы найдете это определение:
Bootstrap — это набор инструментов с открытым исходным кодом для разработки с использованием HTML, CSS и JS. Быстро создавайте прототипы своих идей или создавайте все свое приложение с нашими переменными и миксинами Sass, адаптивной сеточной системой, обширными встроенными компонентами и мощными плагинами, созданными на основе jQuery.
Другими словами, Bootstrap предоставляет вам готовые компоненты, которые позволяют быстро создать красивую веб-страницу.
Просто напишите соответствующую разметку, и ваше приложение будет отлично выглядеть из коробки.
Bootstrap также позволяет легко настраивать его внешний вид на ваш вкус и позволяет вам выбирать нужные элементы для вашего проекта.
Почему Bootstrap, когда у нас есть сетка?
Самая большая жалоба на Bootstrap всегда была раздутием кода. Причина заключалась в том, что он содержал много дополнительного кода CSS, который не использовался в ваших проектах. Второй по значимости жалобой было то, что компоненты Bootstrap были стилизованы в каждой детали, и это могло представлять некоторые проблемы, когда дело доходит до переопределения некоторых правил CSS.
Начиная с последней версии этой популярной библиотеки интерфейсных компонентов, обе критики разваливаются на части: Bootstrap полностью модульный, так что вы просто включаете то, что вам нужно. Кроме того, файлы Sass структурированы таким образом, чтобы было очень удобно настраивать оригинальные стили в соответствии с вашими потребностями.
Сегодня основной причиной, по которой не стоит использовать Bootstrap, является тот факт, что с помощью CSS Grid CSS имеет собственную систему сетки, которая не имеет внешних зависимостей и которая, после изучения, позволяет разработчикам создавать всевозможные макеты с относительными легкость.
Несмотря на то, что я фанат CSS Grid , я думаю, что Bootstrap все еще занимает свое место в разработке фронт-эндов и будет в будущем.
Вот как минимум три причины, почему.
Bootstrap — это больше, чем его сетка
Это правда, причина № 1 для использования Bootstrap — удобная сеточная система, которая позволяет легко создавать адаптивные веб-страницы. Тем не менее, Bootstrap имеет несколько замечательных компонентов, таких как универсальный новый карточный компонент , который вы можете использовать для отображения всех типов контента, таких как текст, изображения и видео, и отзывчивая панель навигации , которая работает из коробки. Вы также можете выбрать готовую цветовую гамму по своему вкусу для большинства компонентов.
А как насчет функциональности многих из этих компонентов? С Bootstrap добавление динамических всплывающих подсказок , каруселей или выпадающих кнопок — это всего лишь вопрос написания соответствующей разметки. Если JavaScript не является вашей сильной стороной, вы все равно можете воспользоваться этими компонентами без написания строки JavaScript.
Кроме того, если вы не являетесь мастером CSS, вы все равно можете использовать мощь Bootstrap в своем веб-дизайне, изучая приемы торговли.
Bootstrap — отличный инструмент для создания прототипов
Иногда вам просто нужен рабочий прототип для клиента. Bootstrap позволяет вам сделать это в кратчайшие сроки и практически без специального кода. Это касается не только грид-системы, но и всех готовых компонентов, которые она может предложить.
Просто добавьте небольшую разметку, и ваш прототип может похвастаться гладкой адаптивной панелью навигации или необычным окном оповещения.
Работа на старых сайтах, созданных с помощью Bootstrap
Одной из распространенных задач для разработчиков является работа над существующими сайтами, написанными другими разработчиками. Нельзя отрицать тот факт, что огромное количество веб-сайтов используют Bootstrap в качестве внешнего интерфейса. Знание того, как работать с фреймворком, очень пригодится, если вам нужно реорганизовать и поддерживать кодовую базу. Не случайно, что во многих вакансиях Bootstrap есть в списке желаемых навыков.
Вывод
В заключение, Bootstrap не собирается уходить в ближайшее время. Последний выпуск содержит огромные улучшения по сравнению с предыдущими версиями, от умного использования микшеров и карт Sass для легкой настройки до введения новых компонентов, служебных классов и все более модульной архитектуры.
Добавьте к этой великолепной документации и простоте использования, и Bootstrap по-прежнему является мощным конкурентом в экосистеме внешнего интерфейса.
Как вы думаете? Ваш следующий проект будет построен с помощью Bootstrap или CSS Grid?
Если вы слышали о Bootstrap, но откладывали его изучение, потому что оно кажется слишком сложным, то изучите наш курс Введение в Bootstrap 4, чтобы быстро и весело познакомиться с мощью Bootstrap.