5 глупых ошибок при верстке сайта

Время от времени все мы совершаем глупые ошибки в любых сферах, в этом нет ничего ужасного – где-то причиной становится недостаток опыта, где-то причиной становится усталость. В верстке совершить глупые ошибки очень просто: верстка – дело запутанное и сложное, достаточно упустить закрывающий тэг или забыть, что вставил invisible text, и вот она – ошибка, которую трудно отловить. Ниже мы рассмотрим те простые и коварные ошибки, которые вам нужно искать в первую очередь.

5 глупых ошибок

1. Не закрыли тэг. Крайне банально, крайне разрушительно. Дело в том, что браузеры умеют работать со страницами даже в том случае, если в HTML была допущена ошибка – браузеры приспосабливаются и кое-как все же выводят содержимое страницы. При этом найти саму ошибку можно только с помощью инструмента отладки (F12 в браузере), явным образом вам об ошибке не сообщают. Еще один вариант отлова ошибки – валидатор от W3: https://validator.w3.org/.
2. Использовали спецсимволы. Invisible text и смайлики – это очень весело и интересно, но они могут сломать вашу верстку на некоторых браузерах. Старайтесь использовать общепринятые символы, а для смайликов и пиктограмм можете создать отдельный шрифт.
3. Прописали стиль не тому классу. Так бывает, когда вы небрежно подошли к вопросу именования классов. Если у вас есть .button1, .button2, …, .button15, ошибиться очень просто. Решается содержательными именами.
4. Написали много !important. !important – очень коварная команда, ее удобно использовать ровно до того момента, пока верстка не сломалась. Множественные !important создают еще одну очередь приоритета над основной очередью, и при возникновении ошибки вы будете очень долго искать корень проблемы. Решается построением структуры стиля.
5. Использовали id там, где есть javascript. JS использует id для того, чтобы менять объекты на странице. Если вы прописали стиль для id, а скрипт поменял id элемента на другой – у вас исчезнет верстка. Поэтому пользуйтесь классами.

Как совершать меньше ошибок

Постоянно проводите code review – анализируйте его валидатором, читайте сами и давайте читать его коллегам. Хорошая практика – вычитывать код через каждые, например, 100 строк. Ну и отдыхайте почаще, чем больше человек устал, тем больше глупых и очевидных ошибок он совершает.

Вывод

Основные ошибки:

• не закрыт тэг;
• использование символов, ломающих верстку;
• был изменен не тот класс;
• !important сломал приоритеты;
• Javascript сменил id элемента.

Вычитывайте код, когда пишете его, и не забывайте отдыхать.