Полезно ли использовать #container, #Wrapper в каждом CSS-макете?
-
19-09-2019 - |
Вопрос
Полезно ли добавлять весь код целиком в #container
, #Wrapper
в каждом CSS-макете?Разве мы не можем сделать макет без этого дополнительного div
?Каковы плюсы и минусы использования этого дополнительного div
?
Является ли это хорошей практикой ?Полезно ли это для любого типа дизайна / верстки?Правильно ли это семантически?
Решение
Полезно ли добавлять весь код в #container, #Wrapper в каждый CSS-макет?
Это не понадобилось бы в каждый макет, если только каждый макет не был одинаковым, и то только в том случае, если для них требуется оболочка / контейнер.
Разве мы не можем сделать макет без этого дополнительного div?
Да, иногда вы можете обойтись без дополнительной обертки div.
Каковы плюсы и минусы использования этого дополнительного div?
Это полностью зависит от вашего макета.Часто при дизайне с фиксированной шириной по центру обертка имеет наибольший смысл.Вы также можете оформить body
тег, но тогда оверлеи и другие элементы могут выглядеть по-другому или не полностью заполнять экран в зависимости от их реализации.
Является ли это хорошей практикой?
Да, но только если этого требует макет.
Полезно ли это для любого типа дизайна / верстки?
Обычно это полезно, когда вам нужно сделать макет фиксированной ширины по центру.Не уверен в других вариантах применения, где это было бы полезно.
Правильно ли это семантически?
Не совсем так, как тот body
это действительно совершенно хороший container
или wrapper
так что добавление еще одного является излишним.Тем не менее, это необходимое зло во многих проектах, в зависимости от необходимой поддержки браузера или макета, который необходим.Продолжайте и используйте его, не беспокоясь, если это имеет смысл для вашего проекта и макета.
Другие советы
Если у вас есть <div id="container"><div id="Wrapper">ВСЯКОЕ ТАКОЕ</div></div>, тогда, конечно, вы можете упростить.Может быть, попробуйте изменить id на class, как в <div class="container"><div class="Wrapper">, затем в вашем стиле измените #container на .container, а #Wrapper на .Wrapper .
Если это все еще работает, вы можете удалить внутренний div, скомбинировав стиль.Если это слишком сложно (слишком много стиля для редактирования), вы можете просто объединить классы в один div:<div class="container Wrapper">ВСЯКОЕ ТАКОЕ</div>.
Размещение контейнера div по всей странице может быть полезно в определенных ситуациях, напримересли вы хотите сосредоточить все по центру, вы можете просто поместить margin: 0 auto;
на контейнере div так и будет сделано.При этом, конечно, это не требуется и не полезно для каждый тип планировки.
Что касается семантической корректности, то, конечно, наличие div
как единственный прямой потомок body
это абсолютно нормально.A div
тег не имеет никакого семантического значения сам по себе, сама причина, по которой он был введен, заключалась в том, чтобы иметь возможность выполнять верстку без неправильного использования семантических тегов.