Абс позицонированное меню

[seemax]

В этой работе http://magneto.skepton.ru/  я применил абс позиционирование, а не флоат для логотипа и меню хедера т как мне казалось это будет чуть проще по причине абс позиционированного sliding down меню, которому нужно прятаться под меню хедера или становиться видимым за пределами родителя .top-wrap. Который, в свою очередь, не должен иметь overflow: hidden, а может быть очищен только пустым div clear: both, в случае применения привычного float: left/right. Плюс к этому, раздвинул горизонтально "Pickup date", "Return date" бордерами, а не маржин.

Эти два решения вызвали жёсткую критику с восклицательными знаками.

Прошу прокомментировать, действительно ли эти два решения и "best practice" несовместимы?

 

[Tilonorrinco]

Критика полностью заслужена. Кстати, это не единственный минус вашей верстки.

Про позиционирование: меню -- контентный элемент, т.е. его содержимое может увеличиваться (например, могут добавляться новые пункты меню). Т.к. абсолютное позиционирование вырывает элемент из потока, то другие блоки (блок родителя в первую очередь) не смогут увидеть увеличения его высоты. Конкретно в вашем примере: при добавлении пунктов меню нарушится симметрия, а потом текст "выпадет" из родительского блока. Абсолютное позиционирование используется для размещения неконтентных элементов (иконок, декоративных треугольников и т.п.). В качестве исключения его можно использовать для контентных элементов, если вы точно уверены, что они не будут изменять своих размеров и другими способами решить задачу нельзя. Например, если нужно эмулировать свойство order для старых браузеров, которые не поддерживают флексы.

 

Edited October 2, 2017 by Tilonorrinco

[seemax]

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

Кстати, страничка не планировалясь к применению в CMS, где пользователь может добавлять пункты меню, а флоат тоже вырвает элемент из потока.

[Switch74]

здесь можно использовать display:inline-block; этого более чем достаточно.
position:absolute; лучше использовать там где без этого не обойтись.
чем меньше разрывов потоков, тем стабильнее ведет себя верстка в любой не понятной ситуации

 

[Tilonorrinco]

seemax, некорректно -- это когда я вам вместо вопроса, который вы задали (насколько правильным является решение, которое я принял, верстая шапку сайта?), отвечаю на совсем другой, не заданный вопрос (насколько хороша моя верстка?). Есть конечно вариант ответить на два вопроса одновременно, однако в таком случае существует риск того, что вам и не нужен анализ верстки и работа по разбору будет проделана зря. Поэтому я и написал "с недосказанностью" -- не из вредности, а чтобы вы обозначили свою позицию по второму вопросу

Даже в том случае, если посадка шаблона на cms не планируется, предполагается, что сайт, для которого шаблон верстается, будет жить: будут изменяться, корректироваться тексты, исчезать и появляться пункты меню и т.п. Поэтому и при верстке учитываются эти минимальные изменения -- это один из признаков хорошей верстки: при изменении контентного содержания сетка не должна разваливаться, а само это содержание должно быть доступно. 

Флоат вырвет элемент из потока только для блочных элементов и только в том случае, если им не сообщить об этом через свойство clear. Поэтому флоаты -- более безопасное решение, по сравнению с абсолютным позиционированием.

Edited October 2, 2017 by Tilonorrinco

[Tilonorrinco]

По верстке:

1) шесть ошибок валидации html: https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fmagneto.skepton.ru%2F

2) wrapper'у прописана только максимальная ширина, в то время как шапке -- минимальная в 320 пикселей. На ширинах меньше 320 пикселей пропорции блоков нарушатся

3) логотип -- элемент содержания, а не оформления, поэтому вместо фонового изображения лучше использовать img. Скрытый text-indent'ом текст лучше прописать картинке в alt. 

4) куда пропадает ссылка на гитхаб при разрешении меньше 550пх и почему?

5) часть атрибутов у элементов слайдера выглядит странно: <li class>, <form action> 

6) элементы слайдера сделаны в виде изображений: как минимум ссылки должны быть сделаны ссылками

7) в датапикере -- внутри кнопки скрываемый текст. Достаточно, имхо, кнопке прописать атрибут title с этим текстом. Псевдоэлементы, формирующие стрелку (если в них есть потребность), можно повесить на этот button, и span'ы в разметке не понадобятся. Лейблы привязываются к инпутам через id, а не через name.  

8) клирфикс использует псевдоэлемент, а не пустой див в разметке (так делали раньше, когда верстали для старых браузеров, которые псевдоэлементы не поддерживали)

9) тэгам header, main, footer нужно прописывать класс, т.к. их может быть несколько на странице.

 

Edited October 2, 2017 by Tilonorrinco

[seemax]

Спасибо Tilonorrinco, очень подробно, даже придирчиво. Но за это и благодарен. Ценю ваше время и комментарии.

Код ревью мощнейшая вещь, можно тянуть "non best practice" из проекта в проект даже не подозревая об этом.

А чем плох клеарфикс на <div>, пожалуйста? Если дошло до подробных разборов.

[Tilonorrinco]

seemax, просто это лишний оформительский элемент в разметке. Традиционно разделяют логику+контент(html), представление (css), поведение (js). В данном случае пустой div это элемент оформления, а не содержания/логики. Поэтому все подобные элементы (блоки-распорки, иконки у пунктов меню и т.п.) обычно выносят в css -- в псевдоэлемент (сейчас это можно сделать практически везде, за редким исключением). Обычно создается специальный класс clearfix и вешается на элемент, содержащий плавающие блоки, либо просто вставляется через миксин в препроцессоре.