Когда начинаешь верстать сайт по макету, всё продумать не сразу получается, особенно, когда опыта работы не так много. Поэтому я составила список самых частых проблем, которые возникают у новичков с вёрсткой, при работе с макетами:
1. Ограничение элементов по высоте
Когда ты устанавливаешь свойство "height" для элемента, для размеров, на которых ты верстаешь, всё хорошо, но как только ты начинаешь заниматься адаптивом сайта — начинается кошмар, при каждом переполнении содержимым, нужно переопределять значение высоты каждый раз.
Чтобы избежать этих проблем, не используй свойство "height" везде, где этого можно избежать. Но встает вопрос, а что тогда делать?
- Первый вариант — отталкиваться от контента блока и устанавливать внутренние отступы.
- Второй — использовать "min-height/max-height", а саму высоту устанавливать автоматически.
Не всегда можно обойтись без жесткого указания высоты, например, если задано изображение с помощью "background-image" и у него нет контента, то без указания высоты не получится, но его нужно сводить к минимуму.
2. Большое количество обёрток
Очень часто встречаю в работах новичков большое количество "div"-ов, от которых можно избавиться без проблем.
Всегда, когда добавляешь вокруг элемента какой-либо тег, подумай, а действительно ли он нужен? Может без него вообще ничего не измениться? Пример привела в галереи ниже, листайте вправо.
3. Неправильная группировка элементов
Когда только начинаешь верстать, нужно сразу посмотреть макеты на все размеры экранов, потому что в дальнейшем могут возникнуть проблемы при адаптиве.
Тогда придется либо «костылить» (лучше не надо), либо переделывать блок заново, чтобы с ним можно было дальше работать.
4. Единицы измерения
Использовать привычные единицы измерения, не экспериментировать и не разбираться с другими вариантами решения задачи.
Например, всегда использовать пиксели и проценты, с их помощью решать все задачи. Но в этом случае решение может быть не оптимальным, ведь единиц измерения намного больше и возможно решение будет более простым, если использовать vw, em, rem, fr.
5. Отладка
Процесс поиска ошибок может затянуться на часы, в худшем случаи дни.
Чтобы этого избежать, нужно разбираться, как быстро находить проблемы в вёрстке, пользоваться инструментами отладки и если ничего не работает, удалять целые блоки прямо в браузере, чтобы сузить границы поиска.
С какими из этих проблем ты сталкиваешься? Чем еще можно дополнить список? Поделись в комментариях.