Комментарии 12
position: absolute; выглядит гораздо проще "магических чисел" в css. Конечно можно сделать миксин и все такое, но если нет проблем с композитными слоями не вижу причины переходить на гриды.
Может это дело привычки, но помоему
.hero__content {
grid-area: 1/2;
justify-self: center;
align-self: center;
}выглядит гараздо понятнее, чем заклинание:
.hero__content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}При этом в первом случае у меня остался неисползуемый "transform", который я могу использовать например для анимации.
Вы абсолютно правы, дело привычки. Кому-то и хаки для ие были норм. А кому-то эти дроби в гридах мутной темой кажутся.
Как по мне главное чтобы улучшение было оправдано, а не технологии, ради технологий.
В примерах некоторые аналоги на абсолютах до сих пор нормально выглядят. Мы всегда берём те свойства которые сейчас актуальны и строим из них опять те же блоки, которые верстаем из года в год и говорим, вот теперь правильно. Но со стороны выглядет только как позёрство, не более.
Вот увидел бы такой css, мысль была бы одна: "здесь творится какая-то чертова магия". Ради чего городить grid и включать довольно неочевидный display: content? Ради экономии пара строчек и погони за модой?
Пусть даже CSS и не язык программирования, но это код, а код должен быть читаемым и понятным тому, кто будет работать с ним после тебя.
И я бы очень не хотел оказаться на месте того, кто будет с этим всем разбираться через год- другой после того, как наворотивший всё это верстальщик свалит в другой стартап.
Ну скажем, с гридами в области решения hero секции подход интересный. Но вот `display: contents` - это и правда неочевидная фича и костыль. Зато стильно-модно-молодёжно.
Достаточно убрать `__content` вообще и использовать `order` as-is.
Хорошо иметь подобный уровень знаний, но его надо применять во благо. У вас в статье классический пример "усложнения кода ради великого ничего". У меня в команде так самые молодые любят писать, чтобы показать, какие они грамотные, не задумываясь о том, что другие молодые, которым это саппортить, могут быть не такие уж и грамотные, или вообще просто "Вася, оторвись на секунду от бэкэнда, надо картинку передвинуть".
не стоит сжигать дом, ради того, чтобы поджарить пару яиц ))
но решение интересное
Ну и треш....
Наложение , а не позиционирование алё
"почему не написать проще? Первый шаг — добавить display: gridк компоненту card." дальше даже не читал....
ужас .
Лично я свалил с абсолютного позиционирования из-за бесконечных проблем с z-index.
Как только начинается position: relative, то он внезапно становится поверх обычных элементов и создает свой контекст наложения, потом появляются z-index-ы, потом приходится вручную продумывать и конфигурировать какой элемент над каким находится. Вот тогда и начинается ужас.
Намного проще отдать эти расчеты браузеру просто расположив элементы в правильном месте в DOM дереве.
До флексов и гридов от абсолютного позиционирования нельзя было уйти, но после их появелния у меня лично сомненией не возникло - не хочется повторять негативный опыт с z-index.
Ну и не знаю как сейчас, но года 4 назад были жуткие тормоза из-за "position: relative" на мобильніх устройствах и переписывали тормозные участки на флексы.
мне кстати запись
grid-area: 1/2;неочень нравится и действительно не очень понятна
Я у себя делаю именованный grid-area:
.layers{
display: grid;
grid-template: "layers" auto / auto;
> *, > ::after, > ::before {
grid-area: layers;
}
}Сразу понятно что в этом элементе будут слои расположенные друг над другом.
Как избавиться от position: absolute в CSS