Продвинутые вертикальные отступы CSS — margin’ы

Продвинутые вертикальные отступы CSS

От автора: о том, как смежный селектор решает сложные требования к дизайну, сохраняя CSS-код в читаемом виде. Это одна из тех задач в веб-разработке, которые начинаются просто, но в процессе становятся сложнее: как внутри статьи, например, поста в блоге использовать вертикальные отступы CSS margin’ы на элементах, когда сама статья состоит из сложной markdown-разметки.

По большей части вам придется работать с исключениями и зависимостями. Между заголовком и изображением должен быть большой отступ, однако между двумя идущими подряд изображениями отступ должен быть небольшим. Отступ между h2 и h3 должен быть больше, чем между h2 и параграфом. И т.д.

Пару лет назад в начале моей карьеры в качестве веб-разработчика все эти исключения и зависимости запутывали код, делали его визуально непоследовательным, что приводило к неожиданному поведению. Я реально гуглил ни один раз «почему не работает margin-top».

Ниже я опишу технику, которой я придерживаюсь уже на протяжении долгого времени. Техника позволяет избежать схлопывания margin’ов, обеспечивает хорошую читаемость и позволяет создавать сложные зависимости.

Шаг 1

Простая статья выглядит следующим образом:

Обычно я беру два параграфа и настраиваю между ними вертикальный margin так, чтобы это смотрелось красиво. Затем я использую это значение в качестве базового для всех элементов.

Это правило добавляет margin-top ко всем прямым дочерним элементам в .article, у которых есть смежный тег. Применяя margin-top только к прямым дочерним элементам, я избегаю определенного нежелательного поведения. Например, ul в коде выше получит margin-top, а его li уже нет.

В CodePen демо ниже показан пример:

Шаг 2

На втором этапе я добавляю больше определенных правил, например:

Все элементы после img получают margin-top. Принцип схож с применением margin-bottom к img напрямую. Однако у смежного селектора и margin-top есть два преимущества: не нужно удалять margin-bottom с :last-child и избегать схлопывания margin’ов.

В CodePen ниже показан расширенный пример:

Шаг 3

На этом этапе я добавляют правила к определенным элементам, например:

Если у h2 есть смежный тег, он получит margin-top. То же самое будет с изображением.

Пример CodePen:

Шаг 4

На последнем этапе я работаю с определенными зависимостями:

Если после изображения следует другое изображение, то отступ между ними должен быть очень маленьким.

Пример CodePen:

Если хочется, можно сделать еще более специфичный код. Например:

Если перед h2 идет три изображения подряд, то заголовок получит margin-top. К счастью, это крайний случай. Однако полезно знать, что смежный селектор может решать такие сложные зависимости.

Продвинутое использование

Чтобы улучшить читаемость, я использую (SCSS) вложенность и пишу каждое правило на одной строке. Также я не группирую селекторы с одинаковым значением, так как CSSO сам позаботится об этом в задаче по сборке.

Эта техника хорошо работает с SASS и CSS-переменными, например, для создания базовых сеток. Если все margin’ы вычисляются из одной базовой переменной, то для увеличения или уменьшения отступов нужно всего лишь изменить эту переменную.

CodePen пример на CSS-переменных:

Заключение

Обычно на разработанных в нашем агентстве сайтах очень сложные статьи. В них присутствует не только сложная markdown-разметка, но и заголовки категорий, вступительный текст и вложенные макеты.

Смежный селектор и margin-top позволяют мне решать сложные требования к дизайну, сохраняя читаемость CSS-правил. Особенно если мне позже понадобится добавить или изменить правила.

Автор: Sebastian Eberlein

Источник: //hackernoon.com/

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

Метки:

Похожие статьи:

Комментарии Вконтакте: