Что лучше, обернуть блок дополнительным элементом или с помощью псевдоэлемента before?

Question

[Muvka]

Здравствуйте. Верстаю сайт. В нем блоки идут с чередующимся фоном до краев окна браузера. Контент как обычно с максимальной шириной и центрирован. Так вот, чтобы сделать фон, лучше сделать обертку над контейнером с контентом или создать псевдоэлемент с такой стилизацией?

content: '';
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background-color: #f0f0f0;
  transform: translateX(-50%);

Какой минус второго способа? Просто не хочется лишние обертки делать и загрязнять разметку.

Comments

[Flying]

Сильно зависит от того как выглядит ваша вёрстка на уровне этих блоков и от того каковы требования к возможностям этих блоков. В целом я делаю через отдельный элемент - помогает организовать нормальную структуру html и уменьшает магию

[Muvka]

А мне наоборот не нравится такая структура. У меня 1 блок на сером фоне, другой на белом. И так чередуются. Т.е. один section приходится оборачивать, следующий за ним - нет. И т.д. Потому и спрашиваю, какой минус у второго подхода. С ним код гораздо лучше выглядеть будет :).

[Виталий Першин]

Muvka, Было бы лучше посмотреть на макет. Но нет ничего плохого в дополнительных обертках. Если стоит вопрос использовать или нет, то лучше использовать, так как в дальнейшем будет проще модифицировать и дорабатывать, если конечно вы занимаетесь поддержкой своих проектов

[Muvka]

Виталий, Спасибо. Один ответ принял.

[Rustam Bainazarov]

Muvka, доп. обёртки бояться не нужно абсолютно.

Answer 1

[Александр Осадчий]

Здравствуйте!

Если вам нужен фон на всю ширину страницы, а контент фиксированной ширины - тогда лучше обернуть в дополнительный класс

Так как селектору с before прийдется дать свойство
position: relative
Чтоб сам before не уехал от блока и в итоге before так-же получится с фиксированной шириной

Comments

[Muvka]

Ну блоку естественно надо будет relative дать. А ширина у before будет 100vw - т.е. ширина окна браузера. И да, z-index: -1 забыл написать)