Для чего нужен главный врапер?

Question

[incentive]

Не так давно начал изучение фронт енда, и вот мне не дает покоя вопрос, зачем в body все содержимое еще оборачивают в див? разве нельзя все те же значения задать для боди?
И сразу вопрос лендинг сайты. На одном из видео уроков человек сказал, что вся лендинг страница сделана из враперов.
Мол считаем блоки, допустим их 5. В body делаем 5 враперов и уже в них делаем футеры, хедеры и секшины, я так понял даже без main. Как относиться к такой информации?

Answer 1

[Антон]

Не так давно начал изучение фронт енда, и вот мне не дает покоя вопрос, зачем в body все содержимое еще оборачивают в див? разве нельзя все те же значения задать для боди?

Он выполняет роль основного контейнера.

Как относиться к такой информации?

В чем вопрос, в семантической разметке внутри блоков или в чем?
Можете просто размечать секции внутри дивами, как и сами секции.

Answer 2

[WapSter]

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

Answer 3

[Robert-critical-thoughts]

зачем в body все содержимое еще оборачивают в див? разве нельзя все те же значения задать для боди?

Возможно wrapper который шел после body был нужен для элементов анимированного смещения контента. Обычно такой применяется на десктопном или мобильном меню, когда вы нажимаете на бургер(меню => открыть), слева\справа вылезает блок меню, который двигает контент.

На одном из видео уроков человек сказал, что вся лендинг страница сделана из враперов.

Как правило, страница лендинга должна состоять из смысловых блоков, wrapper(иногда container) очень часто центровщик, либо обертка для стилизации внутреннего контента.
Будет лучше, если вы научитесь грамотно применять тэги для глобальной компановки контента: не важно лендинг это или крупный сайт. В итоге ваша структура в лучшем случае должна выглядеть так

html
  head
  body
    header
         nav
    main
        section                                                                        
        aside
    footer
       nav

Вы можете заменить все теги кроме html, head, body на div, но почему бы сразу не сделать правильно, wrapper у вас будет находится в любом месте в body, для логической связки контента. Допустим глобальный wrapper это центровщик контента, а header__menu-wrapper- может быть оберткой под ваш блок меню.

Comments

[incentive]

Да я понимаю семантику разметки, но потом посмотрю видео уроки, разборы верстки и меня сбивают с толку дивы. Я в целом понимаю некоторые ситуации когда нужен див контейнер, но на видео(разных) у них повсюду враперы, основной врапер, врапер во врапере, где то там хедер с врапером внутри. Потом идет второй большой врапер, в нем секция, в ней ЕЩЕ один хедер и куча враперов.
В итоге смотришь код, а там сплошные дивы-враперы и хедеры в каждой секции.
Как браузер потом все это воспринимает?

[Robert-critical-thoughts]

buchecha, Используйте дивы тогда, когда не можете подобрать тэг по нужный вам контент, если вы видите текст - то это скорее всего p, если вам нужно обернуть 2 тэга p в один блок, то тут отлично подойдет див с классом ~text-wrapper

Answer 4

[Дмитрий]

Элементарная ситуация: на странице последовательно идут блоки с разным фоном (белый/серый/белый/серый), но содержимое этих блоков должно находиться в контейнере с фиксированной шириной. Как быть? Вот так:

<div class = "wrapper bg-grey">
    <div class = "container">
        ...
    </div>
</div>

Это позволит в конечном итоге избежать ненужных зависимостей между блоками, даже если потребуется перенести их в другое место на странице.
А к body применять стили вообще не стоит, кроме некоторых базовых, которые будут наследоваться всеми элементами.

Comments

[incentive]

не так задал вопрос. Понимаю зачем общий контейнер, но не понимал почему через боди нельзя делать тоже самое. Ответ : к боди лучше не принимать-в принципе достаточен)

[Дмитрий]

buchecha, так body - это общий родитель для всего содержимого страницы. Враппер сам по себе имеет вспомогательную функцию - оборачивает отдельный логический блок страницы для того, чтобы изолировать его свойства от свойств других блоков. В примере, который я привел, враппер позволяет задать фон для всего блока, в то время, как внутреннее содержимое заключается в контейнер.

[incentive]

Дмитрий, а я говорю про ситуации когда им оборачивают все содержимое в боди. И такое как погляжу почти везде

[Дмитрий]

buchecha, причины разные: семантичность, нежелание прописывать стили для body, необходимость манипуляций с DOM через JS (например, делают корневой элемент в React) и так далее.
Я в большинстве случаев не делаю один враппер для всей страницы, предпочитаю делать отдельный для каждого блока. В общем, никакой особой магии в этом нет, просто в некоторых случаях это полезно. Если не видите причин так делать - не делайте и будете правы)

[Rustam Bainazarov]

buchecha, делают это, например, чтобы иметь возможность эффективно и просто воздействовать на все элементы страницы разом. Например, сдвинуть их с помощью transform. В любом случае, у вас появляется доп. возможность, которая была затруднительна в случае, если бы его не было. Более того, если вы используете какой-нибудь фреймворк, то эта обёртка может служить общим контейнером, где рендерится страница.

Answer 5

[Александр Гамов]

1 - Стилизовать body это плохой тон, да и не семантично, а вот враппер вполне.
2 - фильтровать информацию. Скорее всего автор имел ввиду блоки `` внутри каждого из которых может располагаться и <header> и <footer>

Comments

[WapSter]

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