От автора: я встречал много статей и комментариев, в которых говорилось, что пришло время заменить сетку фреймворка на 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));
}
Вот самые слабые места описанного выше подхода:
Несмотря на то, что классы сетки находятся в одном файле SCSS (что очень необычно – как правило, они оказываются в разных файлах SCSS / компонентов), а количество сеток относительно невелико, работа с сеткой уже становится более сложной.
Каждая сетка требует отдельного имени класса, и слишком много имен может раздражать.
Поскольку классы взаимосвязаны, изменение или создание новых сеток требует высокого уровня концентрации. Риск ошибок велик.
Рано или поздно мы делаем единственное, что имеет смысл: мы создаем абстракции.
.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; }
Наши классы экосистемы генерируются по необходимости!
Вот основные преимущества абстрагирования служебных классов сетки:
Все классы сетки находятся в одном файле SCSS и легко читаются.
Вы можете быстро расширить систему, если этого требует проект.
Больше никаких проблем с именами.
Если вы используете одну и ту же сетку в нескольких проектах, вам вообще не нужно проверять CSS.
Использование более простого CSS означает снижение риска ошибки.
Заключение
Основная цель при работе с CSS – поддерживаемость: делать то, что упрощает сопровождение кода.
При работе с сетками это означает использование служебных классов, если проект становится более сложным. Это также подразумевает создание сеток в HTML, а не в CSS. «Разделение задач» не является темой данной статьи. Если вам интересно, вот видео, котором я объясняю, как мы используем служебные классы в CodyHouse.
«Вы предлагаете, чтобы мы импортировали пакет из сотен строк CSS в каждый проект только для управления сеткой?» Нет. Системы сеток фреймворка обычно огромны, потому что они включают в себя все параметры, некоторые из которых вы никогда не будете использовать: адаптивные модификаторы для всех контрольных точек, смещение, параметры пробелов и так далее. Однако современные инструменты, такие как PurgeCSS, предотвращают раздувание CSS и включают в CSS только те классы, которые вы действительно используете.
Вы ищете отличную сетку? Посмотрите CodyFrame.
Автор: Sebastiano Guerriero
Источник: https://codyhouse.co
Редакция: Команда webformyself.
