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

Обычно, чтобы систематизировать эти ограничения и вынести их за скобки, используется обёртка.

Есть два подхода:

  1. Сделать обёртку каким‑нибудь элементом, например div, и задать этому элементу все необходимые стили глобальным классом.

  2. Проставлять глобальный класс каждому этажу самого верхнего уровня.

У каждого способа есть свои плюсы и минусы:

Контейнер‑обёртка

Нужно завернуть всё содержимое страницы в контейнер‑обёртку

Класс‑обёртка

Нужно проставить глобальный класс‑обёртку у каждого этажа

Контейнер‑обёртка

Этажам‑исключениям нужно переопределять стили контейнера‑обёртки

Класс‑обёртка

Поведением нестандартных этажей можно управлять классами‑модификаторами

Контейнер‑обёртка подойдёт для случаев, когда структура содержимого страницы всегда одинаковая, например для статьи в блоге. Либо наоборот — в случаях, когда вы не знаете заранее, что будет на странице, поэтому нужно перестраховаться и задать базовые ограничения. То есть такую обёртку лучше использовать в шаблонах страниц с динамическим содержимым.

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

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

Перейдём к практике. Я добавил два этажа и подвал к нашему меню из предыдущих советов. Теперь это больше похоже на полноценную страницу:

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

Для начала подумаем, какие ограничения стоит задать. Чтобы на узком окне содержимое страницы не упиралось в края, нужно добавить минимальный несжимаемый отступ слева и справа. При этом у нас есть этаж с изображением, который, наоборот, должен касаться краёв окна. Добавим по тридцать пикселей слева и справа:

.wrapper {
  padding: 0 30px;
}

Кроме этого, нужно ограничить максимальную и минимальную ширины содержимого. Допустим, максимальная — 1200 пикселей, а минимальная пусть будет 800 пикселей:

.wrapper {
  max-width: 1200px;
  min-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 30px;
}

Таким образом мы вынесли стили, отвечающие за ширину и боковые отступы страницы, за скобки и теперь можем добавить класс wrapper любому этажу, чтобы он подчинялся общим правилам:

<header class="wrapper">
  ...
</header>
<div class="splash wrapper">
  <h1>Межпланетный диабаз: основные моменты</h1>
</div>
<article class="wrapper">
  ...
</article>
<footer class="wrapper">
  <p>2020, Классная компания</p>
</footer>

Результат целиком можно посмотреть в Кодсэндбоксе.

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

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

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