Почему макет CSS Grid не заменяет сетку фреймворка

От автора: я встречал много статей и комментариев, в которых говорилось, что пришло время заменить сетку фреймворка на CSS Grid. Я не могу полностью согласиться с этим.

Сетка фреймворка — это «пакет» служебных классов, который можно использовать в любом проекте для распределения элементов по (адаптивным) столбцам и строкам. Он может включать сотни строк кода или всего несколько правил. Это может быть сетка that-framework-name или ваша пользовательская сетка.

Вот пример из сеточной системы CodyFrame:

<ul class="grid gap-md"> <li class="col-12 col-6@md"><!-- ... --></li> <li class="col-12 col-6@md"><!-- ... --></li> <li class="col-12"><!-- ... --></li>
</ul>

CSS Grid — это подмножество свойств CSS, используемых для распределения элементов по (адаптивным) колонкам и рядам. Например:

.component-name { display: grid; grid-template-columns: repeat(3, 1fr);
}

Любая структура — это абстракция, использующая CSS; она не заменяет его. Следовательно, мы не можем сравнивать сетку фреймворка с CSS Grid. Первая может использовать вторую (т. е. систему сеток фреймворка на основе CSS Grid). Вопрос «Что лучше?» в этом случае не имеет смысла.

Однако мы можем обсудить, имеет ли смысл включать пакет служебных классов сейчас, когда у нас есть такие мощные свойства макета CSS.

Короткий ответ: и да, и нет, если вы работаете над небольшим проектом. Это имеет смысл в тот момент, когда ваш проект становится все сложнее.

Хватит теории! Позвольте мне показать вам пример.

Запуск проекта с использованием только CSS Grid

Представим, что мы начинаем проект, в котором в какой-то момент нам нужно создать сетку.

.gallery { display: grid; grid-template-columns: repeat(3, 1fr);
}

По мере развития проекта, скорее всего, нам понадобится создать больше сеток:

.gallery, .form-grid, .list { display: grid;
} .gallery { grid-template-columns: repeat(2, 1fr);
} @media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, 1fr); }
} .form-grid { grid-template-columns: minmax(100px, 250px) 1fr 1fr; grid-gap: 20px;
} .list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

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

Проект усложняется

Представьте, что нам нужно применить одну и ту же сетку к двум компонентам. Что нам делать?

Вариант 1) Использовать тот же класс.

<div class="form-grid"> <!-- ... -->
</div> <div class="form-grid"> <!-- ... -->
</div> <style> .form-grid { display: grid; grid-template-columns: minmax(100px, 250px) 1fr 1fr; grid-gap: 20px; } /* we decide to use the same class */ /* .portfolio-gallery { display: grid; grid-template-columns: minmax(100px, 250px) 1fr 1fr; grid-gap: 20px; } */
</style>

Такой подход может не сработать по многим причинам. Во-первых, придирчивый разработчик, любящий семантику, немного изменит все изнутри. Что наиболее важно, мы создадим невидимую связь между двумя компонентами: изменение CSS первого из них повлияет на второй. Вы создаете ловушку для себя в будущем.

Вариант 2) Создать новую сетку.

<div class="form-grid"> <!-- ... -->
</div> <div class="portfolio-gallery"> <!-- ... -->
</div> <style> .form-grid, .portfolio-gallery { display: grid; grid-template-columns: minmax(100px, 250px) 1fr 1fr; grid-gap: 20px; }
</style>

Создание новой сетки для нового компонента и группировка классов были бы самым безопасным подходом. Кроме того, это не повлияет на размер CSS.

Теперь представьте, что мы подошли к моменту, когда проекту требуется несколько (похожих) сеток. Следует ли нам продолжать создавать новую сетку для каждого компонента?

.gallery, .form-grid, .portfolio-gallery, .contact-gallery, .list { display: grid;
} .gallery, .form-grid, .portfolio-gallery { gap: 20px;
} .form-grid, .portfolio-gallery { grid-template-columns: repeat(3, 1fr);
} .gallery { grid-template-columns: repeat(2, 1fr);
} @media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, 1fr); }
} .contact-gallery { gap: 16px; grid-template-columns: repeat(4, 1fr);
} .list { gap: 40px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

Вот самые слабые места описанного выше подхода:

Рано или поздно мы делаем единственное, что имеет смысл: мы создаем абстракции.

.grid { display: grid; }
.grid-col-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gap-sm { gap: 16px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 40px; }

Наши классы экосистемы генерируются по необходимости!

Вот основные преимущества абстрагирования служебных классов сетки:

Заключение

Основная цель при работе с CSS – поддерживаемость: делать то, что упрощает сопровождение кода.

При работе с сетками это означает использование служебных классов, если проект становится более сложным. Это также подразумевает создание сеток в HTML, а не в CSS. «Разделение задач» не является темой данной статьи. Если вам интересно, вот видео, котором я объясняю, как мы используем служебные классы в CodyHouse.

«Вы предлагаете, чтобы мы импортировали пакет из сотен строк CSS в каждый проект только для управления сеткой?» Нет. Системы сеток фреймворка обычно огромны, потому что они включают в себя все параметры, некоторые из которых вы никогда не будете использовать: адаптивные модификаторы для всех контрольных точек, смещение, параметры пробелов и так далее. Однако современные инструменты, такие как PurgeCSS, предотвращают раздувание CSS и включают в CSS только те классы, которые вы действительно используете.

Вы ищете отличную сетку? Посмотрите CodyFrame.

Автор: Sebastiano Guerriero

Источник: https://codyhouse.co

Редакция: Команда webformyself.