Smart Grid и постпроцессоры

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

1. Media-запросы на одинаковые размеры экрана разбросаны по коду.
2. Одинаковые правила не сгруппированы.

Второй пункт решается настройкой максимальной оптимизации у таких плагинов, как clean-css и css-nano.

Первый пункт менее очевиден. Рассмотрим пример:

.items{
   .row-flex()
   .md(justify-content, center);
 
   .item{
      .col();
      .size(3);
      .size-md(5);
      .size-xs(10);
   }
}

.items{
   @include row-flex()
   @include md(justify-content, center);
 
   .item{
      @include col();
      @include size(3);
      @include size-md(5);
      @include size-xs(10);
   }
}

.items
   +row-flex()
   +md(justify-content, center)
 
   .item
      +col()
      +size(3)
      +size-md(5)
      +size-xs(10)
   

.items
   row-flex()
   md(justify-content, center)
 
   .item
      col()
      size(3)
      size-md(5)
      size-xs(10)
   

Получаем:

.items {
   display: flex;
   flex-wrap: wrap;
   margin-left: -15px;
   margin-right: -15px;
}
 
@media screen and (max-width: 992px) {
   .items {
      justify-content: center;
   }
}
 
.items .item {
   box-sizing: border-box;
   margin-left: 15px;
   margin-right: 15px;
   word-wrap: break-word;
   width: calc(100% / 12 * 3 - 30px);
}
 
@media screen and (max-width: 992px) {
   .items .item {
      width: calc(100% / 12 * 5 - 30px);
   }
}
 
@media screen and (max-width: 576px) {
   .items .item {
      width: calc(100% / 12 * 10 - 30px);
   }
}

Очевидно, что одинаковые media max-width 992px лучше сгруппировать!

Для решения этой задачи хорошо подойдёт плагин gulp-group-css-media-queries, после применения которого мы получим тот самый "идеальный код", который обсуждался в предыдущих разделах.