Что делать если дизайнер сделал ссылки с разными отступами?
Что делать если дизайнер разметил ссылки навигации с разными отступами? Вот взял и поставил как ему понравилось. Если я установлю контейнеру justify-content: space-between/space-around или center с margin, всё равно элементы не на своих местах в pixel perfect. Неужели мне нужно каждой ссылке присваивать свой класс и делать разные отступы? Как правильно? Я новичок в pixel perfect.
Ankhena, Но я верстаю макет с интернета, чтобы наполнить свое портфолио. Как поступить по вашему мнению? Ошибка ли это для pixel perfect если не делать каждому элементу padding и оставить разницу такая как на фото. Мне интуиция подсказывает, что с точки зрения сайта это неверно. Если дизайнер проявил небрежность, зачем делать точь в точь? Это же не Figma, а браузер. Как думаете?
Ankhena, как я понимаю дизайнер поставил текст (ссылки) так как выглядит красиво. Он врядле делал это с учетом что это будут элементы с одинаковыми отступами. Чтобы сделать идеальную схожесть с макетом, придется каждой ссылке делать свой класс с padding.
Вам дизайнер в каждый пункт меню специально положил по прямоугольничку. Который показывает ширину каждой ссылки. И их ширина на удивление одинаковая. И отступы между элементами тоже одинаковые.
OGuman, добавлю немного пояснений - дизайн должен быть универсально применяемым. Он должен давать алгоритм использования стилей в типовых ситуациях. Если это не выполняется, о пиксель перфекте можно забыть и ориентироваться на дизайн более поверхностно.
Либо придется верстать в стиле индусского кода, каждую ссылку заворачивать в уникальный класс и его описывать. И о гибкости и универсальном переиспользовании компонентов забыть.
strelok011, вот я тоже так думаю, не приминим же индусский код к переиспользованию компонентов и гибкости. Вот я сейчас верстаю макет для портфолио, стоит ли делать индусский код? Как это оценит работодатель? Что лучше по вашему мнению? Сделать продуманный и правильный код или индусский и иметь четкую схожесть с макетом?
Никогда не используйте индусский код. Если работодатель к нему будет склонять - или переубедить или менять работодателя. Индусский код в портфолио - можно забыть о хороших контрактах.
Почитайте про БЭМ, кстати говоря.
Так же имейте в виду - макет может оказаться адаптивным. Если дизайнер хорош, он всё это учтет, если нет - вам придется разгребать последствия. Сразу спрашивайте, как себя ведет макет на ключевых размерах окна, в мобильном виде, как элементы начинают менять положение в промежуточных состояниях, при переполнении, при произвольном наполнении блоков (много текста, мало, картинки не по формату и т.п.).
Хорошая верстка должна учитывать все вышеперечисленные моменты, быть семантичной и кроссбраузерной.
Для портфолио стоит постараться, вылизать код (возможно снабдить комментариями по коду), проверить поведение на разных разрешениях, в разных браузерах, убедиться в идентичности и тогда выставлять на обозрение.
Чем больше нюансов учтено - тем дороже будет стоить ваша работа.
OGuman,
Представьте себе такую ситуацию. Вы все сверстали, и тут прилетают правки.
Например, этот пункт меню убираем, а эти 2 позиции добавляем. Что будем делать, если они не помещаются в контейнер в одну строку?
В шапке будет не один телефон, а два. И еще ватсапп. И график работы надо как-то туда запихнуть.
Ах да, у нас же сайт на русском, а шрифт из макета не поддерживает кириллицу. Значит, меняем шрифт.
И таких кейсов может быть очень много.
«Сферический в вакууме» макет можно сверстать pixel-perfect. Но в реальном проекте нужно учитывать кучу нюансов, которые далеко не всегда может предусмотреть дизайнер.
