Каковы плюсы и минусы использования CSS-сетки по сравнению с фреймворком вроде Bootstrap? Мне советуют Bootstrap, почему я должен использовать Bootstrap вместо CSS Grid?
Вопрос не в том, почему, а в том, когда!
Одним из главных аргументов против использования CSS-фреймворков, таких как Bootstrap, Materialize или Bulma, является чрезмерное раздувание кода. Тонны ненужных правил стилей CSS, которые никогда не будут использоваться, утяжеляют ваш проект.
Если вы хотите, чтобы ваш сайт был компактным, чтобы повысить скорость загрузки и производительность, CSS Grid — лучший выбор.
Однако, если вы новичок в интерфейсной веб-разработке и еще не освоили CSS, то использование CSS-фреймворка, такого как Bootstrap, вам подойдет.
Самым большим препятствием, с которым столкнулся CSS Grid на пути к более широкому принятию сообществом веб-разработчиков, была его плохая кроссбраузерная совместимость и поддержка.
До 2017 года, CSS Grid поддерживался только Google Chrome и Firefox, в то время как Internet Explorer, Microsoft Edge, Opera и даже Safari не обеспечивали браузерной поддержки CSS-Grid.
Использование Grid CSS в готовом к производству коде было рискованным. Вот почему большинство разработчиков застряли в использовании макетов сетки на основе Float или Flexbox или полагались на CSS-фреймворки, такие как Bootstrap, Materialize…, для создания макетов сетки из 12 столбцов.
Однако с 2017 года поддержка CSS Grid значительно улучшилась.
У использования встроенного CSS Grid перед внешними сеточными фреймворками есть немало преимуществ. Некоторые из преимуществ включают:
Уменьшение раздувания кода. Вместо того, чтобы создавать дополнительные элементы HTML, содержащие вашу сетку, столбцы и строки, дорожки сетки создаются в вашей таблице стилей.
Улучшенная семантика. Каркасы, как Bootstrap часто принуждали разработчик, чтобы рисковать в divitis территории. Более того, сеточные фреймворки не всегда используют наиболее семантически правильные имена классов.
Уменьшенные размеры файлов. Поскольку CSS Grid является встроенным, нет необходимости включать в свои проекты большие библиотеки, такие как Bootstrap.
Скорость развития. Как только вы изучите синтаксис, создание прототипов с помощью CSS Grid станет быстрым и эффективным.
Ранее одним из недостатков использования CSS Grid было то, что он поддерживается не всеми браузерами.