Есть ли смысл создавать отдельные дивы для каждой картинки и для лого?

Question

[Максим Иванов]

К примеру есть вот такая конструкция:

<header class="header">
	<div class="logo">
		<img src="" alt="">
	</div>
	<div class="list">
		<ul>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
	</div>
	<div class="burger_menu"></div>
</header>

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

<header class="header">
			<img src="" alt="" class="">
			<ul class="">
				<li class=""><a href="#"></a></li>
				<li class=""><a href="#"></a></li>
				<li class=""><a href="#"></a></li>
			</ul>
		<div class="burger_menu"></div>
</header>

И тоже самое со "списком картинок". Создавать лучше один див и в него поместить все картинки?:

<div>
    img
    img
    img
    ...
</div>

Или же:

<div>
   <div>img</div>
   <div>img</div>
   <div>img</div>
    ...
</div>

Comments

[indeveloping]

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

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

[Сергей delphinpro]

Совершенно не имеет значения. Всё зависит от конкретных кейсов. Нужна обёртка или нет — решать вам, как разработчику.

[Сергей delphinpro]

<div class="list">
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  </div>

Только вот здесь лучше div заменить на nav

[Ankhena]

Нужно ли картинку оборачивать div'ом - зависит от картинки, на сколько она соответствует предполагаемым размерам, нужно ли её обрезать/масштабировать. И что будет при адаптиве. Часто размерами блока проще манипулировать, чем картинкой.

А меню, по семантике, лучше оборачивать в nav.

Посмотрите хорошее видео

Answer 1

[Alex]

Я так не делаю. Но справедливости ради отмечу, что не занимаюсь версткой прям 24/7. Предпочитаю максимально сокращать количество элементов на странице, в том числе за счет div. А то потом встаёт вопрос производительности, ты смотришь на страницу, а там 1500 DOM узлов и треть из них дивы, которые можно было бы выбросить.
Если коротко, мой ответ таков:
Старайтесь не использовать div вообще. Только, если без него никак не получится правильно спозиционировать какой-то элемент.

Answer 2

[Антон Литвиненко]

Я картинки обычно заворачиваю. Если нужно менять размеры или делать отступы, то я это делаю с оберткой, а не с самой картинкой. Опять же если нужно ограничивать размеры через высоту или используя object-fit все равно придётся завернуть. Для анимации типа scale при наведении тоже придётся завернуть.

Answer 3

[Виктор Кокорич]

Да, все должно быть в дивах

Answer 4

[Сергей]

Нет, это не обязательно. Потом добавите, если понадобится. Я вот всегда в дивах пишу, ибо потом всегда что-то нужно добавить, но, если вы уверены, что не нужно будет - не делайте.
P.S. Прочитал свой ответ, его можно было сократить до "делайте как удобно"

Comments

[Максим Иванов]

2/2 (и да и нет ответы) и что в таком случае делать? хд

[Максим Иванов]

мне дадут пи*ды если я эксперта приглашу на такой вопрос?)

[indeveloping]

Максим Иванов, Ответы "да" - это просто ирония.