Как я перестал использовать Bootstrap в угоду CSS Grid

23 мая 2018 г.

Лично я считаю, что в плане веба, Bootstrap ещё рано полностью заменять на CSS Grid. Но перевел эту статью с точки зрения перспективы на будущее, которое уже далеко не за горами.

Перевод статьи How I stopped using Bootstrap’s layout thanks to CSS Grid

Почему я перестал использовать Bootstrap?

Bootstrap требует слишком много писанины: вам нужно наплодить много div’ов, даже если вам нужно сделать в макете всего два блока.

Дела становятся еще хуже, когда вы добавляете адаптивность

Или когда вы хотите переместить блоки

Сетка Bootstrap ограничена 12-ю колонками

По дефолту, у Boostrap 10px внутренние отступы, которые довольно сложно переписать.

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

Как создать разметку для сайта без Bootstrap?

Предположим, что у вас есть следующий шаблон, который вам нужно интегрировать:

Как бы это выглядело с Bootstrap:

<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>

Хоть у вас всего четыре блока, вам понадобилось аж 9 div’ов, чтобы закодить ваш шаблон.

Как бы просто это выглядело с CSS Grid

Спасибо гридам, вы можете получить тот же результат с помощью всего четырёх div’ов.

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

Хоть это не так просто как с импортом в Bootstrap, но вам надо будет добавить некоторые дополнительные 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 это будет выглядеть так

Чем сложнее становится дизайн, тем сложнее и запутанней становится ваш HTML c всё большим и большим количеством классов:

<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;
  }
}

А как насчет подвигать блоки?

Скажем, к примеру, что вместо на мобильных устройствах вы хотите навигационную панель над шапкой:

На Bootstrap это бы выглядело так. Вам надо было бы продублировать ваше меню, спрятать одно и показывать другое на мобильных телефонах, а другое на десктопах соответственно.

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 hidden-sm-up navigation-menu-mobile">...</div>
      <div class="col-xs-12 header">...</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-lg-4 hidden-xs-down 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>

И само собой, HTML станет все больше и сложнее с ростом шаблона.

С CSS Grid

Вам нужна только одна строчка CSS, чтобы передвинуть меню навигации наверх и вот как:

...
@media screen and (max-width: 480px) {
  .navigation-menu {
    grid-row: 1;
    grid-column: span 12;
  }
  ...
}

Настраиваем ваш грид шаблон!

Имейте столько колонок, сколько хотите.

По-дефолту, Bootstrap идет с 12-ти колоночной системой сеток. Это значение может быть переписано, но если вы так сделаете, это будет переписано везде в приложении.

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

В grid-template-columns: repeat(12, 1fr); вы можете просто указать число колонок, которые вы хотите вместо 12ти.

Нежелательные 10px внутренние отступы

Колонки в Bootstrap имеют 10px внутренние отступы слева и справа. Самое лучшее решение тут, это переписать их используя padding-right: 0 !important; и padding-left: 0 !important;

С CSS Grid шаблоном, вам надо контролировать все CSS классы, вы можете выставлять внутренние отступы везде где вам надо.

Больше нет нужды скачивать библиотеку

Даже если таблица стилей Bootstrap весит всего несколько килобайт, она затормозит загрузку вашей страницы.

Все основные браузеры поставляются с поддержкой CSS Grid, начиная с 2017, так что нет нужды скачивать какие-либо дополнительные CSS, чтобы использовать гриды.

На время обновления статьи, уже 95.47% браузеров поддерживали CSS Grid.

Стандарты написания гибкого, надежного и жизнеспособного HTML c CSS CSS свойство background-image как антипаттерн