Комментарии 7
И снова здравствуйте))
Нмв, вы забыли рассказать о самой распространённой "багофиче" (по незнанию это идентифицируется как "баг" и наоборот), известной как "схлопывание марджинов".
Если список одномерный и однородный, то отступ можно указывать через плюс:
.list-item + .list-item {
margin-top: 1rem;
}Чем это хорошо?
Семантически отступ как бы выносится на уровень выше, где ему и следует быть.
Практически это читается легче, чем :nth-child() , потому что не нужно в голове формулы парсить.
Если список двумерный, то скорее всего, нужно просто использовать grid и gap. Флекс для этого неважно подходит.
Если список одномерный и однородный
А может лучше сразу:
.list-item ~ .list-item
.list-item:not(:first-child)
Селекторов и их комбинаций вполне достаточно, чтобы выбрать именно те, которые подходят в каждом конкретном случае, а не жёстко привязываться к собственному практическому опыту на уровне догматизма ;)
Мне вот "семантически" более верной кажется именно фильтрация через :not - "все, кроме...". Чем пытаться формулировать в голове цепочку "только если за элементом x непосредственно следует элемент y".
К тому же, если вам понадобится задать отступ у всех элементов кроме последнего (не всегда же margin-top проставлять, иногда и margin-bottom нужен), здесь ваша привычка через непосредственный соседний селектор даст сбой. И получается что в одном случае у вас будет p + p, а в другом p:not(:last-child) - каша мала какая-то получится.
Касаемо первых двух описанных проблем, полностью согласен. Они правда часто встречаются, правда я бы посоветовал для единообразия использовать оформление:
margin: 0rem 0rem;
padding: 0rem 0rem 0rem 0rem;Имхо так код более читаем, чем с использованием -top, -bottom, -left, -right префиксов. Вместо 2-4 строчек мы всегда имеем одну.
Касаемо последней проблемы, то идея неплохая, но селектор с nth-child(2), имхо лучше не использовать в списках или перечислениях элементов в целом. В примере указан селектор (> :nth-child(2)) и он будет работать спору нет, но что произойдёт, когда количество элементов поменяется? А если нужно будет сделать несколько кнопок с особой иконкой, то нам через запятую перечислять все селекторы? Как по мне в таких случаях лучше использовать первоначальный вариант, но немного изменить его:
uia-button--icon-before
uia-button--icon-after
uia-buttonЕсли нам нужно применить специальные стиль при разных вариациях иконок, то этих классов, по идее должно хватить.
Я бы рекомендовал везде использовать 'gap' и только в крайних случаях прибегать к 'margin' и 'padding'
Неверный ответ.
Margin - это margin (со всеми своими особенностями), padding - это padding, а gap - это gap. Первые два вообще свою историю из типографики, видимо, ведут. Использовать нужно именно те свойства, которые необходимо задать. А не заниматься "трюкачеством" и использовать свойства не по своему прямому назначению, пусть и с одинаковым внешним результатом. Вам напомнить блочную модель? И что будет, если padding заменить на margin?
Магия CSS на практике: советы по вёрстке от гика. Часть 5