Школа
Веб-разработка

Вёрстка слева направо и сверху вниз

Игорь Петров
22 апр 2021
👁 10320   🗩3
Веб-разработка

Вёрстка слева направо и сверху вниз

Игорь Петров
22 апр 2021
👁 10320   🗩3
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 17
17
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Модули в вёрстке обычно идут друг за другом и имеют внешние отступы. В ЦСС внешние отступы задают свойством margin:

.module {
  margin-left: 9px;
  margin-top: 18px;
  margin-bottom: 27px;
  margin-right: 9px;
}

Внешние отступы в ЦСС не суммируются, а схлопываются. Если у двух соседних модулей заданы отступы между собой, то применится наибольший из них

Иногда в отступах нет системы, их задают так, как удобнее в конкретный момент для конкретного модуля. Один модуль может иметь отступы в одну сторону, другой — в другую, а то и сразу в несколько сторон:

Внешние отступы в ЦСС не суммируются, а схлопываются. Если у двух соседних модулей заданы отступы между собой, то применится наибольший из них

.textBox {
  margin-top: 27px;
}

.textBox p {
  margin-top: 9px;
  margin-bottom: 9px;
}

.textBox ul {
  margin-bottom: 18px;
}


.nav a {
  margin-left: 4.5px;
  margin-right: 4.5px;
}

Когда в отступах нет системы, вёрстку становится сложнее понимать, поддерживать и развивать. Работу кода трудно представить без подглядывания в браузер. Новые модули слипаются с существующими, приходится каждый раз подкручивать отступы, чтобы всё работало как надо. Начинается путаница, появляются баги.

Проще и надёжнее расставлять все отступы по одинаковым правилам.

Правило: слева направо, сверху вниз

Я советую всегда выстраивать модули слева направо и сверху вниз, а отступы задавать соответственно этим направлениям: все вертикальные отступы делать через нижний отступ, все горизонтальные — через правый отступ:

.textBox {
  margin-bottom: 27px;
}

.textBox p {
  margin-bottom: 9px;
}

.textBox ul {
  margin-bottom: 18px;
}

.nav a {
  margin-right: 9px;
}

Слева направо и сверху вниз — это естественные направления чтения и построения макета. Скорее всего, вёрстка будет наполняться и развиваться именно по этим направлениям: справа в меню появится новый пункт, внизу страницы добавится текст, почтосборник или список ссылок.

Если верстать по этим направлениям, вёрстка будет надёжнее, а добавлять новые модули будет проще. Когда у всех модулей есть правый или нижний отступ, новый модуль никогда не прилипнет к предыдущему. Поведение отступов будет предсказуемым и одинаковым во всей вёрстке, станет проще представить поведение вёрстки при изменении порядка существующих модулей или при добавлении новых модулей.

Отступы только для последних элементов

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

Обычно ненужные отступы последних модулей убирают в два шага. Сначала задают отступы для всех модулей, а затем обнуляют у последнего:

ul li {
  margin-bottom: 9px;
}

ul li:last-child {
  margin-bottom: 0;
}

Удобнее и проще использовать :not в комбинации с :last-child. Результат будет такой же, а кода станет меньше:

ul li:not(:last-child) {
  margin-bottom: 9px;
}


Исключения

Некоторым модулям удобнее задать отступы «против шерсти». Например, если модуль должен встраиваться в середину любой страницы, будет удобно задать ему отступы и сверху и снизу. Часто это бывает нужно для подзаголовков, банеров, перебивок и почтосборников.

Ещё одно исключение: если направление чтения сайта отличается от привычного. Тогда может быть удобнее изменить и направления построения вёрстки и отступов.

В целом, правило «слева направо, сверху вниз» можно использовать как «тупое правило» — то есть просто соблюдать всегда. Потому что когда вы столкнётесь с ситуацией‑исключением, то сами сразу это поймёте.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 17
17
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Андрей Писков

Компоненты должны быть модульными. Каждый модуль должен сам отвечать за своё позиционирование и за отступы от предыдущего элемента.

Если делать отступ снизу, то он повлияет на следующий элемент, который лучше знает, сколько ему надо. Поэтому лучше делать наоборот — отступ слева/сверху. Тогда не будет описанных в статье «исключений» типа заголовков, врезок и прочего.

Андрей, не очень понятно как это решает проблему. В зависимости от соседства отступы элементу могут понадобиться разные. Кроме того, понадобятся другие исключения, когда отступ вдруг не нужен (элемент первый в потоке или ещё что‑то).

По своему опыту могу сказать, что контроль внешних отступов — это кроличья нора. Сложность увеличивается экспоненциально с количеством модулей.

Если перестать контролировать внешние отступы и делегировать эту задачу специальным компонентам, можно серьёзно упростить себе жизнь. Выглядит это как‑то так:

<Stack gap="form">
  <Row gap="input">
    <input type="checkbox" />
    <label> Я согласен! </label>
  </Row>
  <button> Подтвердить </button>
</Stack>

Где Stack и Row — компоненты, которые задают «одноколоночную» горизонтальную или вертикальную сетку и контролируют отступы между дочерними элементами с помощью grid-gap.

Минусов у такого подхода два:

  1. Многословность, особенно если в вёрстке постоянно мешаются отступы.

  2. Необходимость display: grid (так как gap для display: flex всё ещё не везде реализован)

Также, этот подход не уместен для «редакторов». Если речь идёт о вёрстке статьи, то лучше задать все комбинации отступов между модулями как раз с помощью верхнего отступа

Если выбирать между двумя «тупыми правилами» — отступы снизу или отступы сверху, — то мне по душе второе. Потому что в крайнем примитивном случае абзацев и заголовков разного уровня предпочитаю менять именно отступ сверху.

<h1>Заголовок</h1>
<p>Абзац.</p>
<p>Абзац.</p>
<h2>Подзаголовок</h2>
<p>Абзац.</p>
<p>Абзац.</p>

А если понадобятся отступы после заголовков, их легко задать соседними селекторами:

h1 { margin-top: ... }
h2 { margin-top: ... }
h1 + h2 { margin-top: ... }
p { margin-top: ... }
h1 + p { margin-top: ... }
h2 + p { margin-top: ... }

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы