Telegram, whatsApp, тел.:
8 (918) 0538468, e-mail: info@webstyling.ru

Ошибки верстки сайтов. Самые распространенные ошибки начинающих

Ошибки верстки сайтов. Самые распространенные ошибки начинающих 1. Задавать высоту блока
Самая главная ошибка начинающих верстальщиков. За редким исключением фиксированную высоту блока нельзя задавать по следующим причинам:
1) Большинство блоков меняют высоту, так как в зависимости от разрешения экрана, количество, например, строк текста может увеличиваться или уменьшаться в связи с изменяющейся шириной сайта и соответственно блока. Ширина сайта меняется в связи с тем что современная верстка автоматически подстраивается под ширину экрана пользователя и может меняться от 320px до 3840 рх.
2)Также может поменяться содержимое блока(например текст).

 Поэтому в большинстве случаев задавать фиксированную высоту блока категорически нельзя!!! Кроме исключительных случаев, небольших блоков для кнопок или иконок, когда вы на 100% уверены, что блок будет неизменным.

2. Задавать фиксированный margin справа или слева от края страницы для выравнивания блока по центру
Для выравнивания блока по центру используется margin-right:auto; margin-left:auto;  И ни в коем случае расстояние в пикселах от края экрана, так как в этом случае макет будет съезжать на всех разрешениях экрана кроме одного, того которое у вас на компьютере в момент верстки.

3. Использование разных классов для одинаковых блоков

4. Несколько тэгов h1 на странице запрещены поисковиками

5. Использование классов для вложенных элементов, в случае, когда элемент можно однозначно идентифицировать по элементу-родителю.

Пример: ... <div class="apple"> <img class="onion"> </div> ...
В данном случае код class="onion" лишний. Так как данный элемент можно однозначно определить в ксс как .apple img


6. Градиент задается кодом, а не картинкой
background: linear-gradient(#E4AF9D 20%, #E4E4D8 50%, #A19887 80%);


7. Оборачивайте код в див с определенным классом, если вы делаете верстку для новой страницы на существующем сайте
Если вы делаете верстку не сайта, а страницы на сайте и код будет добавляться в ксс всего сайта, обязательно оберните весь код в див с определенным классом, который добавляйте во все классы в css для того чтобы избежать случайного дублирования названий классов, иначе верстка может слететь в разных местах сайта, на разных разрешениях.
Пример вы назвали класс одного из блоков "container", как делают тысячи других разработчиков. На сайте уже были элементы с таким классом и вся верстка для них слетела. Или что ещё хуже вы задали стили прямо для тэга. И верстка слетела в 50 местах на сайте. Если вы обернете все в блок со своим классом, например "veryuniquename". То в ксс нужно будет добавлять этот класс перед всеми классами .veryuniquename .container{...}

Возврат к списку