Какой метод верстки сайта и лейдинга считается оптимальным?

Question

[Олег Серов]

Хотелось бы понять какой метод верстки страницы сайта и ее элементов, наиболее оптимален на данный момент, учитывая необходимость адаптации:
блочный, боксовый или комбинированный.

Comments

[DanKud]

Что такое "боксовый" метод верстки? Флексами имеете ввиду? Я не специалист в верстке, но комбинированный стиль наверное предпочтительнее, а не как некоторые все подряд блоки флексами прописывают и где надо и где не надо :)

[Арсений Матыцин]

DanKud, таблицами надо верстать, инфа сотка)

[Rustam Bainazarov]

А что это за набор «методов» такой, не мог ли бы вы поделиться с нами?

Более того, вёрстка чего конкретно? Все способы и свойства используются в разной степени для разных задач. Если вы о вёрстке разметки (layout), то сейчас это либо flex, либо grid.

[Олег Серов]

Спасибо за ответы. В том числе и ироничные.
Да, Рустам, я не уточнил, извините. Имелась ввиду разметка страницы.
И, да, DanKud, флекс, в том числе.
Опыт у меня не большой, но я все больше склоняюсь, что каждый элемент, шапка, секция, подвал, лучше размечать по определенному методу (float, inline-block, table-cell, flex, grid).
Но вот с адаптацией не сталкивался, пока.
Есть мнения?

[Ragtime Kitty]

DanKud, а есть какая-нибудь причина не использовать флексы?

[Ankhena]

Ragtime_Kitty, полно верстальщиков, которые лепят флекс всюду. Потому что прочитали, что флекс это здорово.

Вот идут у них три блока в столбик на всю ширину окна и они на радостях пишут:

display: flex;
flex-direction: column;

Просто ради того, чтобы был флекс. Зачем?

[Олег Серов]

Вот и я о том, что хотелось бы понимать когда уместно, когда нет.

[Ankhena]

Олег Серов,

Опыт у меня не большой, но я все больше склоняюсь, что каждый элемент, шапка, секция, подвал, лучше размечать по определенному методу (float, inline-block, table-cell, flex, grid).

1. Логично, если вы зададите родителю flex, а дочернему попытаетесь задать float, то float не сработает.
А вот дочерний абсолют - сработает.

2. Если вы решите к шапке применить флекс, это не значит, что футер тоже надо делать флексом.

3. Более того, на десктопе у вас может быть таблица, обычный тег table и соответственно display тоже будет table. Но на мобилках ее уже нужно будет переделать во флекс.

[Ragtime Kitty]

Ankhena, так это просто лишние символы, но хуже-то этого не становится?

[Ankhena]

Ragtime_Kitty, философский вопрос. Зависит от количества лишних символов и ситуации.
В роуминге, например, тарификация может быть по 100КБ, пара лишних торчащих байтиков и ты оплатил лишние ХХ рублей.

[Ragtime Kitty]

Ankhena, и правда философский. Но лишние символы могут быть и любым другим бесполезным мусором:

полно верстальщиков, которые лепят *вставить свойство* всюду

А есть объективные причины, по которым сверстать что-то флексом будет хуже, чем другим способом? Если выглядит и работает оно именно так, как задумывалось, а ие не берется во внимание. Мне правда интересно.

[Ankhena]

Ragtime_Kitty, например, двумерные раскладки, подходящие для гридов, но не реализуемые флексами без дополнительных оберток.

Answer 1

[Александр]

Оптимальный метод верстки используется, например, в бутстрапе 4 - https://getbootstrap.com/docs/4.0/layout/grid/
Разметка на флексах. Для изучения можно посмотреть примеры - https://getbootstrap.com/docs/4.0/examples/