Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

Почему CSS Grid лучше чем Bootstrap

Почему CSS Grid лучше чем Bootstrap

В сегодняшней статье вновь хотелось бы вернуться к тому, что CSS в последнее время становиться всё более мощным инструментом.

Я уже затрагивал тему CSS Grid, но сегодня хотелось бы сделать статью-сравнение между CSS Grid и фреймворком Bootstrap. Ну и как всегда начнём с минусов последнего. Данное сравнение — это свободный перевод статьи «Как я перестал использовать Bootstrap благодаря CSS Grid»

  • Bootstrap слишком «многослоен», для составления HTML документа нужно, как правило, большое количество вложений div
  • Если делаем адаптивную вёрстку, то это добавляет большое количество классов к этим div
  • Сетка Bootstrap ограничена в 12 столбцов
  • По умолчанию Bootstrap имеет 10-пиксельные отступы, которые сложно переопределить
  • Ну и главное, Bootstrap должен быть загружен пользователем, а это замедление сайта

С последним пунктом можно поспорить, современные скорости интернета достаточны высоки и разница в миллисекунды совершенно не заметны для пользователей твоего сайта. Но да ладно...

Для примера вёрстки сайта, при помощи фреймворка и без, возьмём примерно такой макет:

Почему CSS Grid лучше чем Bootstrap

С использованием Bootstrap HTML код будет примерно таким:

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-4 navigation-menu">...</div>
      <div class="col-8 main-content">...</div>
    </div>
    <div class="row">
      <div class="col-12 footer">...</div>
    </div>
  </div>
</body>

Хоть в макете всего четыре блока, для их формирования понадобилось восемь разных «дивов», а вот для формирования такого же макета, но с использованием CSS Grid нужно всего пять:

<body>
  <div class="container">
    <div class="header">...</div>
    <div class="navigation-menu">...</div>
    <div class="main-content">...</div>
    <div class="footer">...</div>
  </div>
</body>

Конечно, это не так просто как с фреймворком, нужно будет в CSS «описать» каждый класс.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.header {
  grid-column: span 12;
}
.navigation-menu {
  grid-column: span 4;
}
.main-content {
  grid-column: span 8;
}
.footer {
  grid-column: span 12;
}

В приведенном выше примере контейнер сначала определяется как сетка из 12 столбцов. Естественно, что нужно также добывать адаптивности к нашему макету, куда без него.

При использовании Bootstrap нужно к div добавить ещё несколько классов, а это и увеличивает и усложняет «понимание» кучи классов в каждом блоке, нужно править HTML.

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-4 navigation-menu">...</div>
      <div class="col-xs-12 col-md-6 col-lg-8 main-content">...</div>
    </div>
    <div class="row">
      <div class="col-xs-12 footer">...</div>
    </div>
  </div>
</body>

При использовании CSS Grid, чтобы добавить адаптивности нет необходимости править HTML код, достаточно просто добавить несколько медиа запросов в CSS и всё.

...
@media screen and (max-width: 768px) {
  .navigation-menu {
    grid-column: span 6;
  }
  .main-content {
    grid-column: span 6;
  }
}
@media screen and (max-width: 480px) {
  .navigation-menu {
    grid-column: span 12;
  }
  .main-content {
    grid-column: span 12;
  }
}

Настройка своего CSS Grid

Как уже было сказано выше, Bootstrap имеет сетку в 12 колонок, конечно это можно изменить, но тогда это коснётся всего набора стилей. А вот с CSS Grid количество столбцов можно задавать сколько нужно и хоть для каждого блока твоего макета.

Ну и последний камень в огород Bootstrap, по умолчанию он имеет справа и слева отступы в 10px, часто это неприятная особенность, конечно, можно задать padding-right: 0 !important; и padding-left: 0 !important;, затем назначить каждому блоку класс и уже через него прописать отступы такие, какие нужны.

Поддержка CSS Grid

Все основные браузеры, ещё в 2017 году, осуществили поддержку CSS Grid и нет больше необходимости подключать дополнительные фреймоврки для создания гридов. На сегодняшний день поддержка браузеров составляет 89%, это достаточно высокий показатель

В свете всего выше изложенного, я соглашусь, CSS Grid это круто, но использовать Bootstrap сейчас вполне оправдано, и то, что это добавляет к CSS 134 КБ и 50 КБ к jаvascript я считаю очень незначительно.


0 комментариев. Будь первым, порадуй автора
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Kanaspo.com — Дизайн и разработка Пользовательское соглашение Политика конфиденциальности
Вверх
Kanaspo Project — Дизайн, разработка, технологии, новости IT

с помощью аккаунта в соц. сетях

или

Восстановить пароль