Как правильно определять структуру при вёрстке?

Question

[xonar]

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

Извиняюсь сразу, так как могу плохо сформировать свою мысль.

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

Например, есть блок подписки. Где указана цена и т.д. На мой сырой взгляд, для меня это:

<div class="number1">
 <div class="nubmer2">
 и тут наконец добрались до содержимого
 </div>
</div>

А на деле оказалось, что там идёт див блок, затем ещё один див блок, дальше третий блок и только в нём уже идёт список элементов.

<div class="number1">
   <div class="number2">
      <div class="nubmer3">
 и тут наконец добрались до содержимого
     </div>
  </div>
</div>

Скрин и сайт данного макета - https://demo.cruip.com/solid/



Это придёт только с опытом? Так как в psd макетах настолько подробной структуры нет, ну или мне такие попались.

Comments

[Rustam Bainazarov]

Только с опытом, конечно. Две внутренние обёртки — лишние.

[xonar]

Рустам Байназаров, Я тоже думал всё время пока верстал, что они лишние. Но, я только начал верстать и не знаю правильно так или нет. Получается, в вёрстке нет стандарта в плане определения структуры? А если есть, то какие? Хотя бы примерно.

[Rustam Bainazarov]

xonar, стандарт один — обёртка нужна там, где она нужна. Когда нужно разграничить элементы или объединить область их обитания.

[xonar]

Рустам Байназаров, Получается, что тут одна обёртка дивом нужна задать размер, закрасить блок. А выравнивания содержимого блока уже прописывать самим содержимым?

[Rustam Bainazarov]

xonar, я напишу через 15 минут структуру так, как сделал бы я.

[ⓒⓢⓢ]

xonar, вы правильно отметили единым красным блоком. Ещё можно увидеть что внутренние элементы, они все выровнены на одинаковый отступ по краям от основного блока - получается это будет внутренний отступ основного блока (padding)
Внутренние элементы "поля", так же имеют закономерные отступы, - но так как отступ между элементами, то это будет внешние отсупы (margin) и снизу, думаю, внутренний padding для линии-границы. Ну как то так ...

[html-css]

<div class="number1">
и тут наконец добрались до содержимого
</div>

.block{box-sizing:border-box; padding:24px; width:размер p;x}

как пример

[xonar]

ⓒⓢⓢ, html-css, Да, значит мои мысли и сомнения были верны, хотел так же изначально делать. Теперь буду знать.

Answer 1

[Rustam Bainazarov]

И ещё в принципе можно упросить, но не нужно.

Comments

[Rustam Bainazarov]

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

P. S. Яндекс делал c помощью figure блоки с планами и ценами на страницах их сервиса с какими-то вычислениями в облаке.

[Rustam Bainazarov]

Forensy, ну и в целом, кстати, как я помню, валидатору вообще пофиг на это.

[xonar]

Кратко и понятно, а то что было в коде того сайта...просто ужас. Спасибо вам и остальным за помощь.

[Rustam Bainazarov]

xonar, тогда отмечайте решением, а то обидно.

[Rustam Bainazarov]

Forensy, я к тому, что ошибки и плохое -- всегда рядом, идеала нет. Но (!) ради образовательных целей, пожалуй, соглашусь с вами — поменяю.